What is Nuxt.JS?
- Clear folder structure
- Server-Side Rendering (SSR): All data is processed on the server, then from the server returns data to the client to display.
- Client Side Rendering (CSR): mostly handled on the client.
- Write code on .vue . files
- Split the website into multiple pages, each page is a separate file.
- Split layouts, components, plugins... making the code easy to maintain and reuse.
Create a new NuxtJS project:
To get started quickly, you can use create-nuxt-app .
Make sure you have installed npm:
npm init nuxt-app <project-name> cd <project-name>
npm run dev
The application is now running on http://localhost:3000 . Well done!
Nuxt.JS project directory structure:
You can create the following extra directories, some of which have special behaviors. Only pages is required; you can delete them if you don't want to use their functionality.
- assets: The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.
- components: The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
- layouts: Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.
- pages: This directory contains your application views and routes. Nuxt will read all the *.vue files inside this directory and setup Vue Router automatically.
- static: This directory contains your static files. Each file inside this directory is mapped to /. Example: /static/robots.txt is mapped as /robots.txt.
- store: This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.