Nuxt Project Structure

Steps to organize your project after installing nuxt. These notes are based on the nuxt documentation

Assets Directory

Just like in a normal project, all of your un-compiled assets go in here. This includes images, fonts, and styles.

In your vue files, you will call assets differently from normal. Use this syntaq:

<template>
  <img src="~/assets/image.jpg />
</template>

background: url('~/assets/image.jgp');

<img :src="require(`!/assets/img/${image}.jpg)>

Using the nuxt.config.js file, add your css styles and modules

export default {
  css: [
    'tailwind',
    '~/assets/css/main.css',
    '~/assets/css/main.scss'
  ]
}

The components directory is where you will create reusable parts of a website.

Components should be .vue files and their filenames should be capitalized like Header.vue or written in PascalCase like TheHeader.vue
You can put components inside components
If you have nested directories in your components, you can handle this one of two ways
1. Add the parent directory to the component name
- /components/base/Header.vue would be:
```
<template>
  <BaseHeader />
</template>
```
1. Add the nested directory to your components in nuxt.config.js
```
components: {
  dirs: [
    '~/components/',
    '~/components/base'
  ]
}
```
- Then you can use the filename by itself

Create your various page layouts in this directory. This generally involves arranging components etc

your default layout will be layouts/default.vue
- All website files will use this layout unless told otherwise
- To Create a layout, the bare minimum that you need is
```
<template>
  <Nuxt />
</template>
```
- Your template can only have 1 root element. A common layout would look like this:
```
<template>
  <div>
    <Header />
    <Nuxt />
    <Footer />
  </div>
</template>
```
If you use a different layout from your default, you will need to specify it in the page's vue file like this:

<script>
export default {
  layout: 'blog'
}
</script>