How to slug an url using Vuejs

Question

I'm building a website with several articles. I'm using Vue Router, and for the moment the urls of my articles look like /article/id, for example : http://localhost:8080/article/85.

How can I slug an URL with the article title so it can be http://localhost:8080/article/the-article-title for example ?

I have no idea what kind of code should I provide so here is my article route :

routes: [
 {
   path: '/article/:id',
   component: require('../components/articlePage.vue').default,
   name: 'article',
   meta: {title: "article"}
  }, 
]

Once user enters /article/85, how do you fetch article data and where is it stored? — aBiscuit
– aBiscuit, Commented Nov 10, 2018 at 22:12
It is stored in a Vuex Store, I fetch the data from an API with an action, and I use a mutation to call this from a component — Arkaer
– Arkaer, Commented Nov 10, 2018 at 22:18
Do you fetch a single article with provided id or load multiple articles? Does your API support querying articles by slug or title? — aBiscuit
– aBiscuit, Commented Nov 10, 2018 at 22:21
I fetch all the articles and I sort by id if I want to display only one with article/:id ; I think the API supports this — Arkaer
– Arkaer, Commented Nov 10, 2018 at 22:35

MARUF AHMED · Accepted Answer · 2020-01-18 20:00:54Z

9

First add a slug in your JSON object if it is not exist in your API or DB

{
  id: 1,
  title: 'Jungle Book',
  slug: 'jungle-book',
  showDate: 'Monday',
  showTime: '19:10 - 20:55'
}

Change the path in your router index file according to your path and component. And the path should have ":slug"

 {
   path: '/movies/:slug',
   name: 'moviedetail',
   component: MovieDetail
}

In the "router-link" add the slug after v-for

<router-link :to="'/movies/' + movie.slug">

Now get the data from your component

 data() {
   return {
      movie: this.$store.state.data,
      movieDetail: []
   }
 },

 methods: {
     getMovie(){
        this.movie.forEach(e => {
           if(e.slug == this.$route.params.slug){
              this.movieDetail = e;
           }
        });
      }
  },

  created() {
     this.getMovie();
  }

answered Jan 18, 2020 at 20:00

MARUF AHMED

1611 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

aBiscuit · Accepted Answer · 2020-01-31 07:01:58Z

There are different approaches with increasing level of complexity and aspects taken care of.

So to start - in order to slug-ify articles, you have to introduce slugs to the application. Since it is mentioned in comments that all articles are fetched priorly, slugs can be added to each article data before saving them to store with custom function that converts words to kebab-case or one of helper libraries (e.g. dashify).

This will make possible to render list of article links using :slug as route param, instead of id and search in store for by param before rendering article page. Good thing is that it still possible to keep both options (slug and id) available by extending logic to search by 2 fields.

Depending on your target - that might be it. But the problem arises in case article title has been changed and user accesses article via externally saved link (shared in social media, indexed by search engines, etc). This defeats SEO.

In order to keep article accessible, it is a good practice to include slug as a required field on the back-end. Slug still can be generated with same approach, but in CMS - before article is stored in the database. In such case it can be double checked, manually edited (as slugs do not always represent full article title because of characters length, special symbols, etc) and be accessible for querying, thus removing hassle of string manipulation from the front-end application.

Also this creates options to configure 301 redirects to preserve indexation even after slug is changed by saving old slugs. But such problem is out of the scope of the current question, even though is a good practice.

How about storing a list of slugs on backend? The last one is the current, the other slugs are the old ones. So that 301 is not needed?

Felipe Toro · Accepted Answer · 2019-10-18 14:03:36Z

4

Router:

{
  path: '/:slug',
  name: 'article',
  component: articlePage
}

Component:

use beforeRouteEnter to show the slug

beforeRouteEnter(to, from, next) {
    console.log(to.params.slug);
}

answered Oct 18, 2019 at 14:03

Felipe Toro

413 bronze badges

1 Comment

brae Over a year ago

Hi Felipe Toro, welcome to stackoverflow! Please consider adding an explanation of the code you have provided, or context for why this solution works. Check out this guide on how to answer questions for more info.

Fredrick · Accepted Answer · 2025-07-19 04:30:53Z

0

install slugify package npm install slugify

and use like this:

var slugify = require(slugify)
//slugifying your string:
let your-slug = slugify('the article title')

answered Jul 19 at 4:30

Fredrick

14 bronze badges

Collectives™ on Stack Overflow

How to slug an url using Vuejs

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related