Getting Started with Vue-cli and Nuxt

Introduction to Nuxt

Nuxt is a framework which borrows the ideas from Next.js and proves to be a universal framework for Vue.js applications. Nuxt helps you to create a variety of applications ranging from Static Generated Vue.js Applications to the Server Rendered Vue.js applications. It comes with a lot of middle ware and layouts that can help anyone to get started without hassle. We can explore Nuxt further by evaluating the components that come into picture while we work with it. Nuxt includes the development ecosystem which contains the following.

  1. Vue 2.x
  2. Vue-Router
  3. Vuex
  4. Vue-Meta

There are various features which one should look upon while working with Nuxt. Namely, you have features like mentioned below which comes packed with Nuxt.

  • Code Spitting
  • Server-Side Rendering
  • Routing with Async Data
  • Static File Serving
  • ES6/ES7 Transpilation
  • Bundling and Minification
  • Managing Meta Information
  • Hot Reload
  • Support to LESS, SASS Etc.
  • HTTP/2 push headers ready
  • Modular Architecture
NOTE: IF you have not set up your workspace yet you always can refer to these Tutorials to get started
  1. An introduction to Vue Framework?
  2. Getting Started with Vue using Fiddle
  3. Learn Fast Handling User Inputs & form bindings using Vue
  4. Easily Bind Select and Multi-select using Vue
  5. Learn to make a ToDo List — Vue Component Creation
  6. Vue ToDo list with Delete Option & Global Event Bus — Part II
  7. How to Create Global Event Bus using Vue.js?
  8. Learn how to work with Computed Properties in VueJS
  9. How to Use Vue.js watchers for Async Updates?
  10. Make a Basic HTML Editor using Vuejs v-html directive
  11. Prevent XSS in Vue.js using Google Caja
  12. How does Event Handling work in Vue.js?

Setup Nuxt with Vue-cli

If you are not familiar with the installation of the Vue-cli. We will strongly recommend you to have a look at the Installation and Usage of Vue-cli Tutorials.

Let’s look at the steps to get started with Nuxt.

If Vue.js is already installed run the following command in the directory where you what your project to be in. The dot at the end of the command line indicates that we need the same folder where the installation should be in.

vue init nuxt/starter .

Once the project is generated let’s install the node based dependencies.

npm install

After running the above when we inspect the directory structure you should see something like the image shown below.

Nuxt Directory Structure
Nuxt Starter Project’s Directory Structure

You can see the various folders that are available. All in all a simple directory structure is in place for anyone to get started. Now we will just go ahead and run the project.

npm run dev

If you see the script part of the package.json you will realize that it just invokes Nuxt and this leads to running the server and also transpiling the code and spitting it out. I have posted the package.json just for reference.

{ “name”: “the-web-juice”, “version”: “1.0.0”, “description”: “Nuxt.js project”, “author”: “Shiv Kumar Ganesh <gshiv.sk@gmail.com>”, “private”: true, “scripts”: { “dev”: “nuxt”, “build”: “nuxt build”, “start”: “nuxt start”, “generate”: “nuxt generate”, “lint”: “eslint — ext .js,.vue — ignore-path .gitignore .”, “precommit”: “npm run lint” }, “dependencies”: { “nuxt”: “¹.0.0-rc3” }, “devDependencies”: { “babel-eslint”: “⁷.2.3”, “eslint”: “⁴.3.0”, “eslint-config-standard”: “¹⁰.2.1”, “eslint-loader”: “¹.9.0”, “eslint-plugin-html”: “³.1.1”, “eslint-plugin-import”: “².7.0”, “eslint-plugin-node”: “⁵.1.1”, “eslint-plugin-promise”: “³.5.0”, “eslint-plugin-standard”: “³.0.1” } }

The result of running the above code is as follows:-

Resultant page after running nuxt
  1. Resultant page after running Nuxt
  2. Now let’s go through the directory structure and explain what is where and how it works alongside.
  3. assets — contains the assets like images or other static content
  4. components — this is the folder where all your components go
  5. layouts — this folder holds the layout to your web application like the header, footer etc.
  6. middleware — this entirely holds the code which should be run before your page is being rendered. This can be some custom function or utilities.
  7. pages — this contains all your pages and routes. Rather you can say routes and views.
  8. store — this helps you to store your Vuex files in place so that the store is in one place.
  9. In order to make it render something specific like “Hello World” or something else. Let’s do that in step wise manner
  10. Open the pages/index.vue file.
  11. Remove all the code in that for time being
  12. Write Hello World in the file as shown below
<template> <h1>Hello World</h1> </template>

This should automatically auto reload the browser or hot reload as we say and should help you to get ahead with your work.

Conclusion

As in this article, we just installed the simple Nuxt template with Vue-cli and tried running it out. Be sure to follow the other tutorials in order to get the other tutorial on the same topic.


Originally published at The Web Juice.