• Create a component with a leading underscore to indicate to nuxt that it expects a parameter

  • _id.vue

• Access the parameter within the file

<template>
    <div>
        <h1>A single blogpost: {{ $route.params.id }}</h1>
    </div>
</template>

Navigation with <nuxt-link>

<nuxt-link to="/blog">Blogs</nuxt-link>

You can also pass in an object that defines the route name and its parameters

<nuxt-link to="{ name: 'posts-id', params: { id: related.id }">

Using router-push to navigate to parameterized route

data() {
    return {
      bid: ''
    }
  },
  methods: {
    onClick() {
      this.$router.push('/blog/' + this.bid);
    }
  }

Using a Custom Layout.vue

• Create new vue file within layouts directory
• Specify new file with pages by using layouts property

export default {
  name: 'home',  
  layout: 'blogs'
}
</script>

Specify Custom Error

• Place within layouts folder and name file error.vue

Nuxt will use this as the default error message. Test by hitting a route not defined within the application.

Global CSS

This is applied to all pages and layouts.

• Place these styles in separate files
• Add the paths to these files in nuxt.config.js in the CSS[] array

/*
  ** Global CSS
  */
  css: [
    '~/assets/myFile.css'
  ],

Note that these can be scss files; nuxt will automatically guess the file type by its extension and use the appropriate pre-processor. You will have to install the necessary webpack loaders if you want to use this feature.

Any time that you make changes to nuxt.config.js, you must restart the development server.

Nuxt offers two ways to use Vuex

• Classic mode
  • A global store that includes everything
  • Simply create one file within store directory
• Modules mode
  • Works with Vuex modules
  • Must create an index.js file and another file for each module needed

Using Vuex Modules Mode

• Create index.js within store directory

export const state = () => ({

})
export const getters = {}

• Create another file for the module (posts.js in this example)

export const state = () => ({
  all: [
    {
      id: 1,
      title: 'Post 1',
      content: 'bla bla bla bla...'
    },
    {
      id: 2,
      title: 'Post 2',
      content: 'bla bla bla bla...'
    },
    {
      id: 3,
      title: 'Post 3',
      content: 'bla bla bla bla...'
    }
]
})

Note that you must restart the development server for nuxt to activate Vuex.

Nuxt automatically injects the store into all components.

• Use this.$store to access the Vuex store inside a component.

Example:

computed: {
  post() {
    return this.$store.state.posts.all.find(post => post.id === this.id)
  }
}

These examples retrieve all of the posts from the store, loops through them, and adds a link to each one on the page.

• In the script section:

computed: {
  posts () {
    return this.$store.state.posts.all
  }
}

• In the template section:

<div class="links">
  <nuxt-link v-for="post in posts" :key="post.id" :to="{ name: 'posts-id, params {id: post.id} }">
</div>

• Within the exported region of the script section, use the head() function:

head() {
  return {
    title: 'Home Page'
  }
}

An example using dynamic data:

head() {
  return {
    title: this.post.title
  }

Using meta tags to optimize for Twitter:

head() {
  return {
    title: this.post.title,
    meta [
      { name: 'twitter:title', content: this.post.title },
      { name: 'twitter:description', content: this.post.content },
      { name: 'twitter:image', content: 'https://i.imgur.com/UYP2umJ.png' },
      { name: 'twitter:card', content: 'summary_large_image' }
    ]
  }

*To perform a production build npm run build