page slug vuejs

Page Slug in Vue.js

If you are building a website or web application using Vue.js, you may come across the term "page slug" at some point. In simple terms, a page slug is a portion of the URL that identifies a specific page on your website.

For example, if you have a blog section on your website, each blog post may have its own page with a unique URL. The page slug in this case would be the part of the URL that comes after the domain name and identifies the specific blog post. So, for a post titled "10 Tips for Learning Vue.js", the page slug might be something like "/blog/tips-for-learning-vuejs".

In Vue.js, there are different ways to handle page slugs depending on your specific project requirements. Here are a few approaches you can take:

Using vue-router

Vue-router is a powerful official router library for Vue.js that allows you to define your application's routes and handle navigation between them. To use vue-router, you first need to install it via npm:

npm install vue-router

Then, you can define your routes and page components in your main.js file like this:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import BlogPost from './components/BlogPost.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/blog/:slug', component: BlogPost }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

In this example, we have defined two routes: one for the home page and one for individual blog posts. The ":slug" part in the blog post route is a dynamic segment that will match any string and pass it as a prop to the BlogPost component. You can then use this prop to fetch the corresponding blog post data and render it on the page.

To generate links to your blog posts, you can use the router-link component in your template like this:

<router-link :to="{ path: '/blog/' + post.slug }">{{ post.title }}</router-link>

This will create a clickable link that will navigate to the corresponding blog post page.

Using vue-page-title and vue-meta

If you want to dynamically set the page title and meta tags based on the current page slug, you can use two additional libraries: vue-page-title and vue-meta. First, install them via npm:

npm install vue-page-title vue-meta

Then, import them in your main.js file and use them like this:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Meta from 'vue-meta'
import VuePageTitle from 'vue-page-title'
import Home from './components/Home.vue'
import BlogPost from './components/BlogPost.vue'

Vue.use(VueRouter)
Vue.use(Meta)

const routes = [
  { path: '/', component: Home },
  { path: '/blog/:slug', component: BlogPost }
]

const router = new VueRouter({
  routes
})

Vue.use(VuePageTitle, {
  suffix: ' | My Website'
})

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    Vue.nextTick(() => {
      document.title = to.meta.title
    })
  }
  next()
})

new Vue({
  router,
  metaInfo: {
    titleTemplate: '%s | My Website'
  }
}).$mount('#app')

In this example, we have added a few new things to our code. First, we have imported the vue-page-title and vue-meta libraries and installed them. Then, we have defined a page title suffix that will be added to all page titles. We have also added a global navigation guard that will update the document title based on the current route's meta title (if it exists).

To set the meta title for a specific page, you can use the following syntax in your component:

export default {
  name: 'BlogPost',
  metaInfo: {
    title: '10 Tips for Learning Vue.js'
  },
  // ...
}

This will set the page title to "10 Tips for Learning Vue.js | My Website" when the user navigates to this page.

Using a Custom Function

If you prefer not to use any external libraries, you can always write your own function to handle page slugs. Here's an example:

import Vue from 'vue'
import Home from './components/Home.vue'
import BlogPost from './components/BlogPost.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/blog/:slug', component: BlogPost }
]

function getPageTitle(route) {
  const baseTitle = 'My Website'
  if (route.path === '/') {
    return baseTitle
  }
  const slug = route.params.slug
  const title = slug.split('-').join(' ')
  return `${title} | ${baseTitle}`
}

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  const title = getPageTitle(to)
  Vue.nextTick(() => {
    document.title = title
  })
  next()
})

new Vue({
  router
}).$mount('#app')

In this example, we have defined a custom function called getPageTitle that takes a route object and returns the appropriate page title based on the route's path and slug. We have also added a global navigation guard that will update the document title based on the current route's page title.

As you can see, there are several ways to handle page slugs in Vue.js depending on your specific needs. Choose the approach that works best for your project and start building!