Nuxt3でページにスタイルを指定する方法についてです。
Headタグ使う
SFC内に以下のように記述する事でスタイル指定が可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<template> <div> <Head> <Style children="body { background-color: green; }" /> <Style>body { background-color: green; }</Style> <Link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" /> </Head> </div> </template> |
useHeadを使う
Composable APIを使ってscript setupに書くこともできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script setup> definePageMeta({ layout: 'none', }) useHead({ script: [ { src: '/js/three.min.js', }, ], link: [ { rel: "preconnect", href: "https://fonts.googleapis.com", }, ], style: [{ children: 'html,body { margin: 0; width: 100%; height: 100%; overflow: hidden;}' }], }) </script> |
useHeadとLinkやStyleタグの両方を指定しても問題ないようです。両方の指定が出力されます。
app.headを使う
nuxt.config.tsで指定することもできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
export default defineNuxtConfig({ app: { head: { style: [{ children: "body { font-size: 2rem; }" }], link: [ { rel: "stylesheet", href: "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", }, ], }, }, }); |
参考リンク
- https://v3.nuxtjs.org/guide/features/head-management/
- https://nuxt.com/docs/getting-started/seo-meta
コメント