Build a Slug Generator Vue.js Component (Ep 22) - Build an Advanced Blog/CMS

[@eazydotme4619]

Great work Alex, I was using HTML5, Bootstrap and jQuery. Got a basic functionality in my way. This may help for those who don't go for Vue.js: function convertToSlug(Text) { return Text.toLowerCase().replace(/ /g,'-').replace(/[^\w-]+/g,''); } $("#post_title").keyup(function(){ var oldText = $(this).val(); var newText = convertToSlug(oldText); var Slug = $("#slug_link").attr('href')+'/'+newText; $("#slug_link").text(Slug); }); And now you have to include the edit button as per your logic. [PS: Here #slug_link is an HTML anchor.]

[@timl9883]

For those having trouble like I did for an hour trying to figure out why the component was not showing up, make sure you are using the following command in app.js: Vue.component('slug-widget', require('./components/slugWidget.vue').default); make sure you are adding the .default to the end of your component call

[@AwaisAli-jy3cj]

perks of starting late xD you saved my tons of time

[@jebbush2964]

I was going to the movies but since you uploaded a video I rather stay home on a saturday night. thanks

[@clashoftroopers4545]

Miss this guy.

[@marconeumann1085]

Thank you for the long version. You rock!

[@amrraouf3525]

Is he using vue to build the frontend?

[@akas_rai]

This series is really cool. Thanks for your great effort.

[@madusan1]

Why didn't you run the slug function only on click event of the "publish" button? A lot less overhead especially through title changes while in draft stage. Also I always like to add the publish date in the slug url. Helps to keep 'uniqueness' of url... .... or only on the click event on the "Save draft" button

[@lolotoobo06]

Thanx @devMarketer, it's a really great episode (others too :) ) And yes you said 'schlug' :)))

[@TheCodePro]

That was really fun to watch! Good stuff :)

[@JacurtisTutorials]

Thanks, glad you enjoyed it

[@yabreoumar6041]

Merci beaucoup mon Professeur, je vous souhaite longue pour continuer à nous faire plein de vidéo bénévoles merci et courage

[@JacurtisTutorials]

pas de quoi

[@ababibearakazaavelin2585]

@@JacurtisTutorials vous nous manquez tellement cher Alex

[@Mathias-cm4iw]

Great tutorial! Thanks! Just one thing: the Slug Library is pretty huge - its 1.6 MB which really is a lot - are there more light-weighted libraries out there? thanks!

[@snelinternet4654]

Awesome! I'm going use this for a lot of projects :)

[@cromartie1984]

so if you want to do a vuejs component, it must be done in components folder ?

[@foadyousefi]

Great. I learned both Laravel and Vue watching you videos. I thing you should disable slug editing in case of someone editing the post. Because the first time you save a post, maybe you share the link somewhere. You don't want to change post slug with every post edit.

[@JacurtisTutorials]

Good idea. On edit I dont think we will allow editing. That makes sense. If we wanted to be fancy we could set up redirects, but that sounds like a nightmare, haha.

[@foadyousefi]

Just disable editing is enough. If author thinks slug is extremely bad, simply can delete and re-publish the post. But redirection is totally nightmare and UNNECESSARY.

[@ParvezMohd]

Great video !! Best mentor

[@cball97]

If I post the auto generated slug the input is empty. If I edit the slug and hard code that slug in the input it does post the value.

[@amrraouf3525]

Is he using vue to build the frontend?

[@LinardsBerzins]

Thank you for the effort.

[@amrraouf3525]

Is he using vue to build the frontend?

[@snapcaselled1201]

cool intro

[@emansaymeh7119]

hi alex, i would like to thank you for this series I start recently and i am now in Ep 12 I face a problem when i create new user This action is unauthorized. i dont know why , can you help me please

[@JacurtisTutorials]

Try to go to /login and login. You are probably not authenticated. I think we cover this problem in Ep 21

[@amrraouf3525]

Is he using vue to build the frontend?

[@AlcidesMurilloSEO_PPC]

Hey Alex thanks for the video. I keep getting an error and I can't find the solution for the life of me. Create page form disappeared and I get the following error on the console: slugWidget.vue: functional components are not supported with templates, they should use render functions. app.js:29884 [Vue warn]: Error in render: "TypeError: hook.call is not a function" Any thoughts of what I need to do? Thanks; Al

[@JacurtisTutorials]

Are your functions inside of a Vue object methods like in the tutorial or are they functions that are outside of the export wrapper at the bottom. The methods we build have to be inside of the exports.default {} between the curlies.

[@AlcidesMurilloSEO_PPC]

Hi Alex Thanks for getting back to me. All functions are inside the exports.default {} I have even copy and paste your code from github and I keep getting the same error. I am about to pull my hair out and I am bald guy so that will be kind of hard jejeje.

[@JacurtisTutorials]

I am not sure. I have never seen that error before. Are you using Vue 2.5+ and Laravel Mix 1.5+

[@AlcidesMurilloSEO_PPC]

Yes I am using Vue 2.5 and LM 1.5 "devDependencies": { "axios": "^0.16.2", "buefy": "^0.5.3", "bulma": "^0.5.4", "cross-env": "^5.0.1", "font-awesome": "^4.7.0", "jquery": "^3.1.1", "laravel-mix": "^1.5", "lodash": "^4.17.4", "slug": "^0.9.1", "vue": "^2.5.2" }

[@stusmith951]

use slugwidget instead of slugWidget or you can kebab case

[@ALEXEIS]

I use this: function slugBlog() { var title = document.getElementById('title'); title.value = title.value.toUpperCase(); //just to capitalize the title (optional) var slug = document.getElementById('slug'); slug.value = slugTrimmer(title.value); } function slugTrimmer(slugUrl) { return slugUrl.toString().toLowerCase() // Ensures slug is in lowercase .replace(/\s+/g, '-') // Replaces spaces with - .replace(/[^\w\-]+/g, '') // Removes all non-words chars .replace(/\-\-+/g, '-') // Replaces multiple dashes with single - .replace(/^-+/, '') // Trims - from start of text .replace(/-+$/, ''); // Trims - from end of text }

[@JacurtisTutorials]

yeah this is good. I like that node-slug handles many edge cases like character accents, multiple dashes, punctuation, lowercasing everything, even handling unicode and emoji and staying compliant with RFC standards. But this is a good basic regex that handles the 99% cases. Thanks for sharing.

[@jebbush2964]

I wanna watch the long version, thanks

[@JacurtisTutorials]

Its in the description for your viewing pleasure. Grab some popcorn!

[@jebbush2964]

THANK YOU :)

[@cagcak5933]

before node-slug ==> /js/app.js 1.52 MB after node-slug ==> /js/app.js 3.46 MB

[@shaneblackwoodGodbless]

was going to skip