tutorial nuxt vue basic start

Nuxt: getting started with it

ā€¢ 6 min read

Iā€™m very excited about Nuxt.
I canā€™t help but try it as soon as possible, so here I am.

This time, instead of using some magic command to start with a scaffolding, I went to a different route, starting from scratch setting up and working on a project with an empty folder as the starting point.

Surprisingly, everything went smooth and clear to me.

So, letā€™s have this journey together to create a universal Vue app with Nuxt.

Run the Terminal and type:

mkdir testProject
cd testProject

Then, set up a npm project with (filling the required fields):

npm init

Then, install Nuxt:

npm install nuxt --save

We need to add the first script alias within the package.json file:

"scripts": {
    "dev": "nuxt"
}

Now we can run it to start a development session. Before it, we need to create a required folder: the pages folder within the project. Now run the command npm run dev and go with your browser to http://localhost:3000

Pages #

To see something on screen, we need to create our first Vue component (such as index.vue) within the pages folder using this minimal template:

<template>
  <h1>Title</h1>
</template>

Now itā€™s time to create a couple of components for our website, letā€™s say a header and a footer so we can potentially reuse them on different pages.

Components #

Letā€™s create a new folder named components placing in it a couple of Vue components, header.vue and footer.vue:

<template>
  <header>This is the header</header>
</template>

<style scoped>
  header{
    background-color: #ccc;
  }
</style>

This is an example for the header component. Now itā€™s time to use them in out page:

<template>
  <div>
    <Head />
    <h1>Index</h1>
  </div>
</template>

<script>
import Head from '~/components/header.vue'

export default{
  components:{
    Head
  }
}
</script>

As you might notice, Iā€™ve changed a bit in the markup because a single wrapper is required in a Vue template, thus a generic div has been added to wrap both the new component and the h1 tag as well.

In the javascript portion, you can see how to import a component in order to use it in the template markup.

Layouts #

Usually, itā€™s better to have some master layout that can be used by several pages. Nuxt allows defining different layouts in a layouts folder.

A layout in Nuxt is a regular Vue component with the special tag nuxt. This is, for example, the default layout (default.vue):

<template>
  <div>
    <nuxt />
  </div>
</template>

You can modify it as your convenience, adding style and logic to it. All the pages will get updated accordingly. The nuxt tag will be replaced with the page content (PS: sometimes the hot reloading doesnā€™t work properly, just refresh the browser to see the updates).

On each page you can define which layout should be used with the property layout:

<template>
  <div>
    <Head />
    <h1>About</h1>
  </div>
</template>

<script>
export default{
  layout: 'other'
}
</script>

Static website #

So far, we created a very simple website Vue-driven. This means a SPA (Single Page Application) that usually doesnā€™t play nice with SEO, search engines, social crawlers, etc.

Therefore, this is the main reason why Iā€™m so excited about Nuxt. The ability to bake the whole web app as static website is terrific. You only need to use the command nuxt generate to do that. Remember to update the package.json with the new command:

"scripts": {
    "dev": "nuxt",
    "generate": "nuxt generate"
},

now you can run npm run generate in a new Terminal window (keep the dev process active).

This process will generate for each page a static version of it preserving all the logic and the functionalities of the SPA version. Neat, isnā€™t it?

Source files here.