NuxtJS Directory Structure

13 Dec, 2021
In this article, we are going to learn about the directory structure of NuxtJs. Nuxt.js is a free and open-source web application framework based on Vue.js, Node.js, Webpack, and Babel.js. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js.
Create NuxtJS Application:
Step 1: You can create a new NuxtJs project using the below command:
npx create-nuxt-app gfg
 
Step 2: Now navigate to your app using the following command:
cd gfg
Project Structure: It will look like this.
There are 7 main sub directories in NuxtJs:
Components: In this directory, we can store all the components that we are going to use in our main app. Unlike NextJs or ReactJs we don’t have to manually import the components in our pages in NuxtJs. NuxtJs will automatically scan and import your components into your pages.
Components: In this directory, we can store all the components that we are going to use in our main app. Unlike NextJs or ReactJs we don’t have to manually import the components in our pages in NuxtJs. NuxtJs will automatically scan and import your components into your pages.
Pages: In this directory, we can create pages for our NuxtJs app. You just have to create a new .vue file inside the page’s directory to create a new page. After that NuxtJs will automatically scan the pages and create the router for the app. You can also create nested pages by creating new folders inside the pages directory.
Pages: In this directory, we can create pages for our NuxtJs app. You just have to create a new .vue file inside the page’s directory to create a new page. After that NuxtJs will automatically scan the pages and create the router for the app. You can also create nested pages by creating new folders inside the pages directory.
Assets: In this directory, we can store different types of assets that we are going to use in our app like images, fonts, audio files, logo, and styles.Note: If this directory does not exist in your app then you can create it by simply adding a folder with the name ‘assets’.
Assets: In this directory, we can store different types of assets that we are going to use in our app like images, fonts, audio files, logo, and styles.
Note: If this directory does not exist in your app then you can create it by simply adding a folder with the name ‘assets’.
Plugins: In this directory, we can add the plugins that we are going to use in our NuxtJs app. After installing the plugins we have to create a new file for that plugin inside our Plugins directory.
Plugins: In this directory, we can add the plugins that we are going to use in our NuxtJs app. After installing the plugins we have to create a new file for that plugin inside our Plugins directory.
Static: In this directory, we will store the static files that are not going to change like robot.txt, sitemaps, or favicons.
Static: In this directory, we will store the static files that are not going to change like robot.txt, sitemaps, or favicons.
nuxt.config.js: This is the configuration file for your NuxtJs app. You can add new modules here by creating a plugins section. You can also override the default settings of your NuxtJs file using this nuxt.config.js file.
nuxt.config.js: This is the configuration file for your NuxtJs app. You can add new modules here by creating a plugins section. You can also override the default settings of your NuxtJs file using this nuxt.config.js file.
packages.json: This file contains all the dependencies of your NuxtJs app. You can also see the commands to run or build the application inside this file with the name and version of your NuxtJs app.
packages.json: This file contains all the dependencies of your NuxtJs app. You can also see the commands to run or build the application inside this file with the name and version of your NuxtJs app.
Example: In this example, let’s create a new page. For this, we have to create a new file with the name gfg.vue inside our pages directory. Add the below content in the file:
gfg.vue
<template>  <div>    <h3>This is a simple NuxtJs Page.</h3>   </div></template>
Run the app: Run the app using the below command in the terminal.
npm run dev
Output:
Reference:https://nuxtjs.org/docs/get-started/directory-structure/
Nuxt.js
Vue.JS
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
JavaScript | Promises
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?