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.
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
- An introduction to Vue Framework?
- Getting Started with Vue using Fiddle
- Learn Fast Handling User Inputs & form bindings using Vue
- Easily Bind Select and Multi-select using Vue
- Learn to make a ToDo List – Vue Component Creation
- Vue ToDo list with Delete Option & Global Event Bus – Part II
- How to Create Global Event Bus using Vue.js?
- Learn how to work with Computed Properties in VueJS
- How to Use Vue.js watchers for Async Updates?
- Make a Basic HTML Editor using Vuejs v-html directive
- Prevent XSS in Vue.js using Google Caja
- How does Event Handling work in Vue.js?
Setup Nuxt with Vue-cli
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.Shell1vue init nuxt/starter .
- Once the project is generated let’s install the node based dependencies.Shell1npm install
- After running the above when we inspect the directory structure you should see something like the image shown below.
- 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.1npm run dev
The result of running the above code is as follows:-
- Now let’s go through the directory structure and explain what is where and how it works alongside.
- assets – contains the assets like images or other static content
- components – this is the folder where all your components go
- layouts – this folder holds the layout to your web application like the header, footer etc.
- middleware – this entirely holds the code which should be run before your page is being rendered. This can be some custom function or utilities.
- pages – this contains all your pages and routes. Rather you can say routes and views.
- store – this helps you to store your Vuex files in place so that the store is in one place.
- In order to make it render something specific like “Hello World” or something else. Let’s do that in step wise manner
- Open the pages/index.vue file.
- Remove all the code in that for time being
- Write Hello World in the file as shown belowXHTML123<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.
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.
Also published on Medium.