NuxtJS Directory Structure

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.
• 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’.
• 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.

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

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:

<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: