Nuxt.jsのheadタグ内どうする？
kurumin
プログラミングのーと
Nuxt3の基本
kurumin
Contents
環境構築
npx create-nuxt-app projectでプロジェクトを作成しようとしたが、Nuxt2がインストールされてしまうので公式ドキュメントを参考にしてインストールするのがよいかも。
（@latestを付けてもNuxt2がインストールされてしまった。。。
// プロジェクト作成
npx nuxi@latest init <project-name> // パッケージマネージャーはnpmを選択
// 依存関係インストール
npm install
// 開発サーバ起動
npm run devメタ情報
色々な方法があるんだな～
nuxt.config.ts
アプリケーションの動作をオーバーライドまたは拡張することができるファイル。
CSSやJSファイルの読み込みで使うことが多そう。
cssやjsファイルはpublicディレクトリを作成し、その中へ入れる。
export default defineNuxtConfig({
devtools: { enabled: true },
app: {
head: {
charset: 'utf-8',
viewport: 'width=device-width, initial-scale=1',
link: [
{ rel: 'stylesheet', href: '/assets/styles/main.css', media: 'all' }
],
script: [
{ src: 'https://maps.googleapis.com/maps/api/js?key=AIzaSyACC594sxstg7H6vXVTs79VNTVi1Wr1998' },
{ src: '/assets/scripts/main.js' }
]
}
},
routeRules: {
'/i/**': { proxy: 'https://foo.com/i/**' },
'/files/**': { proxy: 'https://foo.com/files/**' },
}
})上記のように設定すると、アプリ全体のheadタグ内でcssやjsファイルが読み込める。
routeRulesについては下記を参照。（上手く動作しないので学習中。。。）
運用中のサイトなどの場合、画像ファイルなどをローカルに取得しなくていいので便利。
useHead
特定のページに対して設定する場合に使用。
titleなど、動的に変更ができそう。（「記事タイトル | サイト名」など）
<script setup lang="ts">
useHead({
title: 'My App',
meta: [
{ name: 'description', content: 'My amazing site.' }
],
bodyAttrs: {
class: 'test'
},
script: [
{
src: 'https://third-party-script.com',
// valid options are: 'head' | 'bodyClose' | 'bodyOpen'
tagPosition: 'bodyClose'
}
]
})
</script>useSeoMeta
メタ情報をオブジェクトとして管理できる？見やすい？
<script setup lang="ts">
useSeoMeta({
title: 'My Amazing Site',
ogTitle: 'My Amazing Site',
description: 'This is my amazing site, let me tell you all about it.',
ogDescription: 'This is my amazing site, let me tell you all about it.',
ogImage: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
})
</script>外部CSS
<script setup lang="ts">
useHead({
link: [
{
rel: 'preconnect',
href: 'https://fonts.googleapis.com'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
crossorigin: ''
}
]
})
</script>テンプレート作成
layoutsやpagesディレクトリはNuxt3で自動で生成されなくなったようなので、作成する。
ルートディレクトリにあるapp.vueは邪魔なので削除。
layoutsとpages
レイアウトファイルでページファイルを読み込むときは、<slot />を使用する。
Nuxt2では<nuxt />だったみたいなので、間違えないよう注意。
ページファイルに下記を記述すると、指定したテンプレートを読み込むことができる。（デフォルトではdefault.vueが読み込まれる）
<script setup lang="ts">
definePageMeta({ layout: 'foo' });
</script>myLayout.vueというファイル名だと読み込むことができなかったので、ファイル名に大文字が入ってると駄目かも。。。
コンポーネント
命名規則として、TestComponent.vueという風にキャメルケースで作成する。
呼び出すときは<TestComponent />と記述する。
勉強になったリンク
テンプレートの記述方法について
Nuxt.jsにはあまり関係ないかもだけど。
HTMLの指定idエリアをテンプレート化する方法は、
HTMLを描画した後に、new Vue();が実行され、<div id=”app”> 〜 </div>の内容が最初に描画されてしまい、
一瞬テンプレート変数{{ param1 }}などがそのまま画面に表示されてしまうため、あまり良くないとのこと。
よく使ってたのに・・・！
以下のようにscriptタグ内で解析して出力すれば、変数も組み込まれた後に描画できる。
<script>
new Vue({
el: '#app',
data: {
param1: 'サンプル2'
},
template: `<div id="content">
<h1>画面表示 (Vueのtemplateの値にテンプレートを直接記述)</h1>
<p>これは{{ param1 }}です。</p>
</div>`
})
</script>ソースが長い場合は、x-templateを使用しても面白そう。
ABOUT ME
