- [Narrator] We have a Nuxt app up and running.
If we navigate to the VS Code project,
would see that we have some files
and folders already generated for us.
Let us go through each of this
and see what they're used for.
The first folder we have is the Nuxt Build Directory.
The Nuxt Build Directory is dynamically created
and heating by default.
And this directory contains auto-generated files
when you run the command "nuxt dev"
or build artifacts when you run the command "nuxt build".
We also have the Components Directory.
Inside this directory,
you would find all the reusable Vue components
that you intend to use
in your pages,
your layouts
or even
reuse
with other components.
Next, we have the Node Modules Directory.
This directory consists of all the dependencies
that are used in your application.
For example,
we have
"eslint"
and "nuxtjs" as dependencies
in this project.
The Pages Directory, on the other hand,
contains all of your application views
and routes
and
Nuxt
will transform
any view file you have inside this directory
and automatically generates a router configuration for it.
Here's an example.
We have the "index.vue" file right here.
What Nuxt will do is generate
a router configuration for this file
so that you can assess it directly on the browser.
Same applies if you have an "about.view" file
or a "contact.view" file.
Same process applies,
Nuxt generates a router configuration
so that you can go to the browser
and assess them directly
from the project route URL.
Next, we have the Static Directory.
This directory is directly mapped to your route server
and contains files that
will likely never change.
All the files included inside the Static Directory
is automatically served by Nuxt
and is accessible through your
project route
URL.
The Store Directory contains all the Vuex store files
and Nuxt will disable the Veux door by default
To enable each, all you need to do
is create an "index.js" file
inside this directory.
Next, we have the "nuxt.config" file
and this is one of the most important config files
you would find in a Nuxt project.
In here, you can configure the global page metadata.
You can set the default targets mode
for your application and also add some modules
and build modules for your application.
There are also other Config Files
you get out of the box with your Nuxt project.
For example, if you're using ESLint,
you have like an ESLink config file.
If you're using Prettier, you'd have the same.
And also a gitignore file to specify the files
that you don't want to
push to
GitHub
through your version control system, like Node Modules.
Directory, for example,
you don't want to push that to Git
or the
Nuxt Build Directory.
Finally, we have the "package.json" file
and this file is also located in the roots of the folder
and it defines the scripts needed to run your application
and also contains all the dependencies
that you've installed in your app.
There are also directories that I've not mentioned here
that don't get added out of the box when
you use the Nuxt CLI to create a new Nuxt project.
But down the line, you might actually need to use them.
So what you need to do is
create a new
folder
and rename them to
the directory you need.
For example, there is a plugins directory,
there is also the layouts directory
that don't get added by default,
but you might probably need to use them.
So, you just need to
add a new
folder
and rename them accordingly.
Having a well defined knowledge of the Nuxt directory
and what each of them does makes for a good start
to learning
how to
build Nuxt applications.