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

Подписаться 68 тыс.

Просмотров 15 тыс.

50% 1

This video/release covers creating a custom Vue.js component for our blog page slug generator.
If you wish to watch the long version of this video go here: • [LONG VERSION] Slug Ge...
The goal is to build a component that will create a slug for our page based on the title field automatically. This component is actually quite sophisticated as it will take our blog title and automatically create a URL for us by removing any punctuation and even swapping our Unicode characters for their word equivalents, and accented characters for their non-accent equivalents.
After that, we can customize it if we wish, and a customized slug will no longer get updated by our title automatically. Furthermore, if you have customized the slug but wish to reset it back to its auto-generating functionality, you can do that with a simple reset button.
==== MORE FROM THIS SERIES . ====
Full Playlist for the "Building an Advanced Blog/CMS from Start to Finish" Series:
• Build Advanced Blog/ C...
=== LINKS ===
Watch LONG VERSION of This Video (1hr36min)
• [LONG VERSION] Slug Ge...
Node-Slug Plugin on GitHub
github.com/dod...
==== DOWNLOAD SOURCE CODE ====
Download Code from this Episode:
github.com/Dev...
==== FOLLOW ME ====
Subscribe for New Releases!
Subscribe to DevMarketer Insider
confirmsubscri...
Twitter - / _jacurtis
(ask me questions!)
==== QUESTIONS? ====
Leave a comment below and I or someone else can help you.
For quick questions you may also want to ask me on Twitter, I respond almost immediately.
Email me hello@jacurtis.com
Thanks for all your support!

Опубликовано:

7 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 46

@jebbush2964 7 лет назад

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

@eazydotme4619 6 лет назад

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.]

@clashoftroopers4545 3 года назад

Miss this guy.

@marconeumann1085 7 лет назад

Thank you for the long version. You rock!

@amrraouf3525 4 года назад

Is he using vue to build the frontend?

@lolotoobo06 6 лет назад

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

@akas_rai 6 лет назад

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

@TheCodePro 7 лет назад

That was really fun to watch! Good stuff :)

@JacurtisTutorials 7 лет назад

Thanks, glad you enjoyed it

@timl9883 5 лет назад

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 5 лет назад

perks of starting late xD you saved my tons of time

@yabreoumar6041 7 лет назад

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

@JacurtisTutorials 7 лет назад

pas de quoi

@ababibearakazaavelin2585 5 лет назад

@@JacurtisTutorials vous nous manquez tellement cher Alex

@snelinternet4654 7 лет назад

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

@ParvezMohd 7 лет назад

Great video !! Best mentor

@LinardsBerzins 7 лет назад

Thank you for the effort.

@amrraouf3525 4 года назад

Is he using vue to build the frontend?

@ALEXEIS 7 лет назад

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 7 лет назад

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.

@foadyousefi 7 лет назад

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 7 лет назад

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 7 лет назад

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.

@snapcaselled1201 7 лет назад

cool intro

@madusan1 6 лет назад

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

@Mathias-cm4iw 6 лет назад

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!

@cagcak5933 6 лет назад

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

@cromartie1984 6 лет назад

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

@jebbush2964 7 лет назад

I wanna watch the long version, thanks

@JacurtisTutorials 7 лет назад

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

@jebbush2964 7 лет назад

THANK YOU :)

@cball97 6 лет назад

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 4 года назад

Is he using vue to build the frontend?

@emansaymeh7119 7 лет назад

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 7 лет назад

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

@amrraouf3525 4 года назад

Is he using vue to build the frontend?

@AlcidesMurilloSEO_PPC 7 лет назад

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 7 лет назад

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 7 лет назад

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 7 лет назад

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

@AlcidesMurilloSEO_PPC 7 лет назад

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" }