Informations

What is NuxtJS?

Nuxt.js is a framework built on top of VueJS. You can make universal or single page Vue app with a server side rendering part that use NodeJS to improve your seo performance.

Why use Nuxt?

Ready to use

Nuxt natively ships VueJS, Vue Router, Vuex, Vue Server Renderer and Vue-Meta which simplifies the installation and configuration process. All of them only weigh 60 kilobytes, so you don't have to worry about performance. Obviously, nuxt comes with its own override. For example, <router-link> becomes <nuxt-link>.

<!-- VueJS -->
<router-link to="/foo">Go to Foo</router-link>

<!-- NuxtJS -->
<nuxt-link to="/foo">Go to Foo</nuxt-link>

Seo friendly

With a classic single page application (SPA) there is a major problem : SEO.

In fact, google is able to crawl a SPA, but that the rendering is not async so google cannot know when the rendering is finished.

Unlike a native VueJS, the server side rendering is natively available with nuxt which greatly improves your SEO performance.

For example, you can easily define the different meta tags like this.

// Inside the <script> tags of your nuxt page.
head () {
  const title = 'What is NuxtJS?';
  const description = 'Learn more about NuxtJS, the intuitive VueJS framework.';

  return {
    title: title,
    meta: [
      { hid: 'description', name: 'description', content: description },
      { hid: 'og:title', name: 'og:title', content: title },
      { hid: 'og:description', name: 'og:description', content: description },
      { hid: 'twitter:title', name: 'twitter:title', content: title },
      { hid: 'twitter:description', name: 'twitter:description', content: description },
    ]
  }
}

A structured and simplified code

Unlike VueJS which wants to be completely open in terms of code structure, Nuxt imposes its way of doing things.

Pages folder and router

For example, all the files you will create in the pages folder will be pages and will be directly included in the router.

In this way, if we create these files like this:

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

Automaticaly, nuxt will generate this:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

Manage the store with nuxt

Same things with the store folder, let's create todos.js in:

export const state = () => ({
  list: []
})
 
export const mutations = {
  add (state, text) {
    state.list.push({
      text: text,
      done: false
    })
  },
  remove (state, { todo }) {
    state.list.splice(state.list.indexOf(todo), 1)
  },
  toggle (state, todo) {
    todo.done = !todo.done
  }
}

Nuxt will transform it like this:

new Vuex.Store({
  modules: {
    todos: {
      namespaced: true,
      state: () => ({
        list: []
      }),
      mutations: {
        add (state, { text }) {
          state.list.push({
            text,
            done: false
          })
        },
        remove (state, { todo }) {
          state.list.splice(state.list.indexOf(todo), 1)
        },
        toggle (state, { todo }) {
          todo.done = !todo.done
        }
      }
    }
  }
})

Submit your Nuxt project for free now!

NuxtJS layouts

With Nuxt you can easily manage your layouts for your different pages.

Let's create our bloglayout in layouts folder:

<template>
  <div>
    <Header />
    <nuxt />
    <Footer />
  </div>
</template>

<script>
export default {
  name: 'BlogLayout',
  components: {...},
}
</script>

<nuxt />is our app (pages) inside our layout.

Now, let's use our layout inside our blogpage

<template>
  <div>
    <!-- our content goes here -->
  </div>
</template>

<script>
export default {
  name: 'BlogPage',
  components: {...},
  // Here, we use our blog layout
  layout: 'blog',
}
</script>

More example and info on the official documentation.

Projects made with NuxtJS

Nuxt is now used by thousands of vuejs developers around the world. Our mission is to list and share the know-how of the nuxtjs community and maybe inspire you.

Here is an example of a project made with nuxt:

Conclusion

Nuxt.js configures everything you need to make your Vue.js app development more enjoyable without imposing any standard on your code.

In fact, everything is fully configurable, however it offers a solid foundation of best practices and cool features for a solid business or personal project.

Resources

NuxtJS Documentation

NuxtJS Discord

NuxtJS reddit