styling

26 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 directly in pages, layouts, and components using JavaScript import statements or CSS @import statements. Static imports are server-side compatible, but dynamic imports are not server-side compatible. Imported stylesheets will be inlined in the HTML rendered by Nuxt.

CSS property in nuxt.config

You can include stylesheets globally using the css property in nuxt.config.ts. Stylesheets referenced this way will be inlined in the HTML rendered by Nuxt, injected globally, and present in all pages. Example: export default defineNuxtConfig({ css: ['~/assets/css/main.css'] })

Local fonts configuration

Place local font files in the public/fonts directory. Reference them in stylesheets using @font-face with url() to the public path. Example: @font-face { font-family: 'FarAwayGalaxy'; src: url('/fonts/FarAwayGalaxy.woff') format('woff'); }

NPM stylesheet imports

You can import stylesheets from npm packages directly in components or via the css property in nuxt.config. Example: import 'animate.css' or in nuxt.config: css: ['animate.css']

External stylesheets via app.head

You can include external stylesheets by adding link elements to the app.head property in nuxt.config. Example: export default defineNuxtConfig({ app: { head: { link: [{ rel: 'stylesheet', href: 'https://...' }] } } })

Dynamically add stylesheets with useHead

Use the useHead composable to dynamically set stylesheets in your code. Nuxt uses unhead under the hood. Example: useHead({ link: [{ rel: 'stylesheet', href: 'https://...' }] })

Modify head with Nitro plugin

For advanced control, you can intercept rendered HTML with a Nitro plugin hook. Create a plugin in server/plugins/my-plugin.ts and use nitro.hooks.hook('render:html', (html) => { html.head.push('<link rel="stylesheet" href="...">')}) to add stylesheets programmatically.

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 with npm. Examples: npm install -D sass, npm install -D less, npm install -D stylus

Preprocessor syntax in SFC

Use the lang attribute in style blocks to write preprocessor syntax. Examples: <style lang="scss">, <style lang="sass">, <style lang="less">, <style lang="stylus">

Inject code into preprocessed files

Use Vite preprocessor options in nuxt.config to inject code like Sass variables into all preprocessed files. Example: export default defineNuxtConfig({ vite: { css: { preprocessorOptions: { scss: { additionalData: '@use "~/assets/_colors.scss" as *;' } } } } })

Preprocessor workers experimental option

Vite has an experimental preprocessorMaxWorkers option that can speed up preprocessor usage. Enable it in nuxt.config with vite.css.preprocessorMaxWorkers set to true (uses number of CPUs minus 1) or a number.

SFC v-bind for dynamic styles

Use the v-bind function in style blocks to reference JavaScript variables and expressions. The binding is dynamic, so if the variable changes, the style updates. Example: .text { color: v-bind(color); }

Scoped styles in SFC

Use the scoped attribute on style blocks to apply styles only to that component. Styles declared with scoped will not affect other components.

CSS Modules in SFC

Use CSS Modules with the module attribute on style blocks. Access styles with the injected $style variable. Example: <style module> .red { color: red; } </style> then <p :class="$style.red">

PostCSS configuration

Nuxt comes with PostCSS built-in. Configure it in nuxt.config.ts with the postcss property. Default pre-configured plugins are: postcss-import, postcss-url, autoprefixer, and cssnano. Use lang="postcss" on style blocks for proper syntax highlighting.

PostCSS configuration example

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

Use layouts for different styles

You can use different layouts with different styles for different parts of your application. Each layout can have its own scoped styles.

Third-party styling libraries

Nuxt supports any styling tool. Popular options include UnoCSS, Tailwind CSS, Fontaine, Pinceau, Nuxt UI, and Panda CSS. Many have dedicated Nuxt modules available.

Google Fonts with Nuxt

Use the Nuxt Google Fonts module to load Google Fonts. UnoCSS also comes with web fonts presets to conveniently load fonts from common providers including Google Fonts.

Font metric fallback optimization

Use the Fontaine module to reduce Cumulative Layout Shift (CLS) by providing font metric fallbacks.

LCP optimization for CSS

To speed up global CSS file downloads: use a CDN to place files closer to users, compress assets with Brotli, use HTTP2/HTTP3 for delivery, and host assets on the same domain (not a different subdomain). Modern platforms like Cloudflare, Netlify, and Vercel do most of this automatically.

Inline all CSS and remove external references

If all CSS is inlined by Nuxt, you can experimentally remove external CSS file references from rendered HTML using a build:manifest hook. Iterate through the manifest, find the app entry CSS list, and remove entries starting with 'entry'.

Remove external CSS references hook example

Example hook to remove external CSS file references: 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) } } } } } })

External CSS linking with Google Fonts example

Example of enabling Google Fonts using useHead: useHead({ link: [{ rel: 'preconnect', href: 'https://fonts.googleapis.com' }, { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', crossorigin: '' }] }). Alternatively, use the `<Link>` component in your template with the same attributes.

Give your agent this brain