styling & assets

55 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Local stylesheets directory

Local stylesheets should be placed in the app/assets/ directory.

Import stylesheets in components

You can import stylesheets in pages, layouts and components directly using either a JavaScript import statement or a CSS @import statement. Use static imports for server-side compatibility, as dynamic imports are not server-side compatible.

Import stylesheets example

Example of importing stylesheets in a component: ```vue <script> import '~/assets/css/first.css' </script> <style> @import url("~/assets/css/second.css"); </style> ``` Statements like the first import are server-side compatible; dynamic imports are not.

Use css property in nuxt.config

You can define global stylesheets using the css property in nuxt.config.ts. Stylesheets referenced here will be inlined in the HTML rendered by Nuxt and injected globally to all pages.

css property configuration example

Example of configuring global stylesheets: ```ts export default defineNuxtConfig({ css: ['~/assets/css/main.css'], }) ```

Font files directory

Local font files should be placed in the public/ directory, for example in public/fonts. Reference them in stylesheets using the url() function.

Font-face declaration example

Example of declaring a custom font: ```css @font-face { font-family: 'FarAwayGalaxy'; src: url('/fonts/FarAwayGalaxy.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } ``` Then reference it by name in stylesheets, pages or components.

Import npm stylesheets

You can import stylesheets distributed through npm directly in your components, pages, and layouts, or reference them in the css property of nuxt.config.ts.

Install and import animate.css example

To use animate.css: ```bash npm install animate.css ``` Then import it in your component: ```vue <script> import 'animate.css' </script> <style> @import url("animate.css"); </style> ``` Or reference it in nuxt.config.ts: ```ts export default defineNuxtConfig({ css: ['animate.css'], }) ```

Add external stylesheets via app.head

You can include external stylesheets by adding a link element in the head section using the app.head property of nuxt.config.ts.

External stylesheet configuration example

Example of adding an external stylesheet via nuxt.config.ts: ```ts export default defineNuxtConfig({ app: { head: { link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }], }, }, }) ```

Dynamically add stylesheets with useHead

You can use the useHead composable to dynamically set a value in your head in your code. Nuxt uses unhead under the hood for head management.

useHead composable example

Example of dynamically adding a stylesheet: ```ts useHead({ link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }], }) ```

Modify head with Nitro plugin

You can intercept and modify the rendered HTML head programmatically using a Nitro plugin with the render:html hook.

Nitro plugin to modify head example

Example of a Nitro plugin that adds a stylesheet: ```ts import { definePlugin } from 'nitro' export default definePlugin((nitro) => { nitro.hooks.hook('render:html', (html) => { html.head.push('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">') }) }) ``` Place this in server/plugins/my-plugin.ts

External stylesheets are render-blocking

External stylesheets are render-blocking resources that must be loaded and processed before the browser renders the page. Web pages with unnecessarily large styles take longer to render.

CSS preprocessors installation

To use SCSS, Sass, Less, or Stylus, install them first. For Sass & SCSS: npm install -D sass. For Less: npm install -D less. For Stylus: npm install -D stylus.

Using preprocessors in components

Write stylesheets in the app/assets directory. Import your source files in your app.vue or layouts files using the preprocessor's syntax via the lang attribute.

SCSS import example

Example of using SCSS in a component: ```vue <style lang="scss"> @use "~/assets/scss/main.scss"; </style> ```

Preprocessor in nuxt.config

You can configure preprocessor stylesheets in nuxt.config.ts using the css property.

Preprocessor configuration example

Example of configuring SCSS in nuxt.config.ts: ```ts export default defineNuxtConfig({ css: ['~/assets/scss/main.scss'], }) ```

Inject code in preprocessor files with additionalData

To inject code like Sass partials with variables into preprocessed files, use the Vite preprocessorOptions in nuxt.config.ts.

SASS partials and additionalData configuration

Example of creating and injecting SASS partials: Create a file at assets/_colors.sass: ```sass $primary: #49240F $secondary: #E4A79D ``` Then in nuxt.config.ts: ```ts export default defineNuxtConfig({ vite: { css: { preprocessorOptions: { sass: { additionalData: '@use "~/assets/_colors.sass" as *\n', }, }, }, }, }) ```

Nuxt uses Vite by default for styling

Nuxt uses Vite by default for handling CSS and preprocessors. If you wish to use webpack instead, refer to each preprocessor loader documentation.

Preprocessor workers experimental option

Vite has an experimental preprocessorMaxWorkers option that can speed up using preprocessors. You can enable it in nuxt.config by setting preprocessorMaxWorkers to true (which uses the number of CPUs minus 1).

Enable preprocessor workers example

Example of enabling preprocessor workers in nuxt.config.ts: ```ts export default defineNuxtConfig({ vite: { css: { preprocessorMaxWorkers: true, }, }, }) ``` This is an experimental option and you should refer to Vite documentation and provide feedback.

SFC styling with Vue

Single File Components (SFC) allow you to write CSS or preprocessor code directly in the style block of your component file for a great developer experience. You can use class and style bindings or CSS-in-JS libraries like pinceau.

Dynamic class and style bindings example

Example of using class and style bindings with Ref and Reactive: ```vue <script setup lang="ts"> const isActive = ref(true) const hasError = ref(false) const classObject = reactive({ 'active': true, 'text-danger': false, }) </script> <template> <div class="static" :class="{ 'active': isActive, 'text-danger': hasError }" /> <div :class="classObject" /> </template> ```

Computed property for dynamic classes example

Example of using computed for dynamic class bindings: ```vue <script setup lang="ts"> const isActive = ref(true) const error = ref(null) const classObject = computed(() => ({ 'active': isActive.value && !error.value, 'text-danger': error.value && error.value.type === 'fatal', })) </script> <template> <div :class="classObject" /> </template> ```

Array class binding example

Example of using array syntax for class bindings: ```vue <script setup lang="ts"> const isActive = ref(true) const errorClass = ref('text-danger') </script> <template> <div :class="[{ active: isActive }, errorClass]" /> </template> ```

Style binding example

Example of using style bindings: ```vue <script setup lang="ts"> const activeColor = ref('red') const fontSize = ref(30) const styleObject = reactive({ color: 'red', fontSize: '13px' }) </script> <template> <div :style="{ color: activeColor, fontSize: fontSize + 'px' }" /> <div :style="[baseStyles, overridingStyles]" /> <div :style="styleObject" /> </template> ```

Dynamic styles with v-bind

You can reference JavaScript variables and expressions within your style blocks using the v-bind function. The binding is dynamic, so if the variable value changes, the style is updated.

v-bind in style example

Example of using v-bind in a style block: ```vue <script setup lang="ts"> const color = ref('red') </script> <template> <div class="text"> hello </div> </template> <style> .text { color: v-bind(color); } </style> ```

Scoped styles

Use the scoped attribute on the style tag to style components in isolation. Styles declared with this attribute will only apply to that component.

Scoped styles example

Example of scoped styles: ```vue <template> <div class="example"> hi </div> </template> <style scoped> .example { color: red; } </style> ```

CSS Modules

You can use CSS Modules with the module attribute on the style tag. Access the module with the injected $style variable.

CSS Modules example

Example of using CSS Modules: ```vue <template> <p :class="$style.red"> This should be red </p> </template> <style module> .red { color: red; } </style> ```

Preprocessor support in SFC

SFC style blocks support preprocessor syntax. Vite comes with built-in support for .scss, .sass, .less, .styl and .stylus files without configuration. Install them first, then use the lang attribute in the style block.

Preprocessor lang attribute examples

Examples of using preprocessors in SFC style blocks: ```vue <style lang="scss"> /* Write scss here */ </style> ``` ```vue <style lang="sass"> /* Write sass here */ </style> ``` ```vue <style lang="less"> /* Write less here */ </style> ``` ```vue <style lang="stylus"> /* Write stylus here */ </style> ```

PostCSS built-in support

Nuxt comes with postcss built-in. You can configure it in your nuxt.config.ts file.

PostCSS configuration example

Example of configuring PostCSS in nuxt.config.ts: ```ts export default defineNuxtConfig({ postcss: { plugins: { 'postcss-nested': {}, 'postcss-custom-media': {}, }, }, }) ```

PostCSS lang attribute in SFC

For proper syntax highlighting in SFC, you can use the postcss lang attribute on the style tag.

PostCSS lang attribute example

Example of using postcss lang attribute in SFC: ```vue <style lang="postcss"> /* Write postcss here */ </style> ```

Default PostCSS plugins in Nuxt

By default, Nuxt comes with the following PostCSS plugins pre-configured: postcss-import (improves the @import rule), postcss-url (transforms url() statements), autoprefixer (automatically adds vendor prefixes), and cssnano (minification and purge).

Use layouts for multiple styles

You can use different layouts to style different parts of your application completely differently.

Layout styling example

Example of styling different layouts: ```vue <template> <div class="default-layout"> <h1>Default Layout</h1> <slot /> </div> </template> <style> .default-layout { color: red; } </style> ```

Third-party styling libraries and modules

Nuxt is not opinionated about styling and provides a wide variety of options. Popular libraries like UnoCSS and Tailwind CSS can be used. The community and Nuxt team have developed plenty of Nuxt modules to make integration easier.

Recommended styling modules

Recommended Nuxt modules for styling include: UnoCSS (instant on-demand atomic CSS engine), Tailwind CSS (utility-first CSS framework), Fontaine (font metric fallback), Pinceau (adaptable styling framework), Nuxt UI (UI library for modern web apps), and Panda CSS (CSS-in-JS engine that generates atomic CSS at build time).

Use modules without opinionated limitations

If your favorite styling tool doesn't have a Nuxt module, you can still use it with Nuxt by configuring it yourself. Depending on the tool, you might need to use a Nuxt plugin and/or create your own module.

Load Google Fonts

You can use the Nuxt Google Fonts module to load Google Fonts. If using UnoCSS, it comes with web fonts presets to conveniently load fonts from common providers including Google Fonts and more.

Vue Transition element support

Nuxt comes with the same <Transition> element that Vue has and also has support for the experimental View Transitions API.

Font advanced optimization with Fontaine

Use the Fontaine module to reduce Cumulative Layout Shift (CLS). For more advanced optimizations, consider creating a Nuxt module to extend the build process or Nuxt runtime.

LCP optimization techniques

To speed up the download of global CSS files, use a CDN so files are physically closer to users, compress assets using Brotli, use HTTP2/HTTP3 for delivery, and host assets on the same domain (not a different subdomain). Modern platforms like Cloudflare, Netlify and Vercel handle most of these automatically.

Remove external CSS files when inlined

If all CSS is inlined by Nuxt, you can experimentally remove external CSS file references from rendered HTML using a hook in a module or nuxt.config.ts.

Remove external CSS references example

Example of removing external CSS file references when all CSS is inlined: ```ts export default defineNuxtConfig({ hooks: { 'build:manifest': (manifest) => { const css = Object.values(manifest).find(options => options.isEntry)?.css if (css) { for (let i = css.length - 1; i >= 0; i--) { if (css[i].startsWith('entry')) { css.splice(i, 1) } } } }, }, }) ```

Give your agent this brain