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

• 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?

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.

1. 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 .

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

   npm install

3. After running the above when we inspect the directory structure you should see something like the image shown below.
   Nuxt Starter Project’s Directory Structure
4. 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 <[email protected]>",
     "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": "^1.0.0-rc3"
     },
     "devDependencies": {
       "babel-eslint": "^7.2.3",
       "eslint": "^4.3.0",
       "eslint-config-standard": "^10.2.1",
       "eslint-loader": "^1.9.0",
       "eslint-plugin-html": "^3.1.1",
       "eslint-plugin-import": "^2.7.0",
       "eslint-plugin-node": "^5.1.1",
       "eslint-plugin-promise": "^3.5.0",
       "eslint-plugin-standard": "^3.0.1"
     }
   }

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

      <template>
        <h1>Hello World</h1>
      </template>

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