mirror of https://github.com/nuxt/nuxt.git
105 lines
3.5 KiB
Markdown
105 lines
3.5 KiB
Markdown
---
|
|
title: 'Assets'
|
|
description: 'Nuxt offers two options for your assets.'
|
|
navigation.icon: i-ph-image-duotone
|
|
---
|
|
|
|
Nuxt uses two directories to handle assets like stylesheets, fonts or images.
|
|
|
|
- The [`public/`](/docs/guide/directory-structure/public) directory content is served at the server root as-is.
|
|
- The [`assets/`](/docs/guide/directory-structure/assets) directory contains by convention every asset that you want the build tool (Vite or webpack) to process.
|
|
|
|
## Public Directory
|
|
|
|
The [`public/`](/docs/guide/directory-structure/public) directory is used as a public server for static assets publicly available at a defined URL of your application.
|
|
|
|
You can get a file in the [`public/`](/docs/guide/directory-structure/public) directory from your application's code or from a browser by the root URL `/`.
|
|
|
|
### Example
|
|
|
|
For example, referencing an image file in the `public/img/` directory, available at the static URL `/img/nuxt.png`:
|
|
|
|
```vue [app.vue]
|
|
<template>
|
|
<img src="/img/nuxt.png" alt="Discover Nuxt 3" />
|
|
</template>
|
|
```
|
|
|
|
## Assets Directory
|
|
|
|
Nuxt uses [Vite](https://vitejs.dev/guide/assets.html) (default) or [webpack](https://webpack.js.org/guides/asset-management) to build and bundle your application. The main function of these build tools is to process JavaScript files, but they can be extended through [plugins](https://vitejs.dev/plugins) (for Vite) or [loaders](https://webpack.js.org/loaders) (for webpack) to process other kind of assets, like stylesheets, fonts or SVG. This step transforms the original file mainly for performance or caching purposes (such as stylesheets minification or browser cache invalidation).
|
|
|
|
By convention, Nuxt uses the [`assets/`](/docs/guide/directory-structure/assets) directory to store these files but there is no auto-scan functionality for this directory, and you can use any other name for it.
|
|
|
|
In your application's code, you can reference a file located in the [`assets/`](/docs/guide/directory-structure/assets) directory by using the `~/assets/` path.
|
|
|
|
### Example
|
|
|
|
For example, referencing an image file that will be processed if a build tool is configured to handle this file extension:
|
|
|
|
```vue [app.vue]
|
|
<template>
|
|
<img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" />
|
|
</template>
|
|
```
|
|
|
|
::note
|
|
Nuxt won't serve files in the [`assets/`](/docs/guide/directory-structure/assets) directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/`](#public-directory) directory.
|
|
::
|
|
|
|
### Global Styles Imports
|
|
|
|
To globally insert statements in your Nuxt components styles, you can use the [`Vite`](/docs/api/nuxt-config#vite) option at your [`nuxt.config`](/docs/api/nuxt-config) file.
|
|
|
|
#### Example
|
|
|
|
In this example, there is a [sass partial](https://sass-lang.com/documentation/at-rules/use#partials) file containing color variables to be used by your Nuxt [pages](/docs/guide/directory-structure/pages) and [components](/docs/guide/directory-structure/components)
|
|
|
|
::code-group
|
|
|
|
```scss [assets/_colors.scss]
|
|
$primary: #49240F;
|
|
$secondary: #E4A79D;
|
|
```
|
|
|
|
```sass [assets/_colors.sass]
|
|
$primary: #49240F
|
|
$secondary: #E4A79D
|
|
```
|
|
|
|
::
|
|
|
|
In your `nuxt.config`
|
|
|
|
::code-group
|
|
|
|
```ts twoslash [SCSS]
|
|
export default defineNuxtConfig({
|
|
vite: {
|
|
css: {
|
|
preprocessorOptions: {
|
|
scss: {
|
|
additionalData: '@use "~/assets/_colors.scss" as *;'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
```ts twoslash [SASS]
|
|
export default defineNuxtConfig({
|
|
vite: {
|
|
css: {
|
|
preprocessorOptions: {
|
|
sass: {
|
|
additionalData: '@use "~/assets/_colors.sass" as *\n'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
::
|