koyama shigehito

現状の最新版はrc.8となっている。

開発中につまった事や、現状の解決策など自分用の覚書として書いていきます。

koyama shigehito

rc.9出た。

koyama shigehito

rc.10でFull Static Generationの機能追加。
最新版はrc.11に。

koyama shigehito

headless uiを使う

https://headlessui.com/

パッケージのインストール

npm install @headlessui/vue

基本これだけで使えて、開発サーバーでは問題なく動作していた。
generateコマンドでSGしてCloudflare Pagesにデプロイした際にエラーとなってしまった。
以下のIssuesに回答があり、現状はbuild.transpileに使用するライブラリを記述すると動く。

nuxt.config.ts

export default defineNuxtConfig({
  build: {
    transpile: ['@headlessui/vue'],
  },
});

koyama shigehito

Meta Tagの書き方が変わっている

https://v3.nuxtjs.org/migration/meta

useHead関数やmeta-componentsが利用できるようになっている。

公式ドキュメントから引用

useHeadを使用

<script setup>
const title = ref('My App')
const description = ref('My App Description')

// This will be reactive even you change title/description above
useHead({
  title,
  meta: [{
    name: 'description',
    content: description
  }]
})
</script>

meta-componentsを使用

<template>
  <div>
    <Head>
      <Title>My App</Title>
      <Meta name="description" content="My app description"/>
    </Head>
    <!-- -->
  </div>
</template>

koyama shigehito

Nuxt / Image

Nuxt 3用にv1が開発中。基本的な機能は既に使えそうで、開発サーバーでは上手く動作していたが、SGしてデプロイするとパスが解決されない。現状SG未対応のよう。

以下ロードマップでは対応予定のよう。

Support static generation via nitro prerendering

koyama shigehito

PRが出た。期待！
https://github.com/nuxt/image/pull/614

koyama shigehito

default scroll behavior

現状、ページ遷移時にスクロール位置が遷移前の位置になってしまう。
ページの先頭に遷移させたい場合、以下のようにappフォルダ内にrouter.options.tsファイルを作成すると先頭にはスクロールするが、遷移とスクロールのタイミングが変で調整が必要かもしれない。他の方法もdiscussionsで議論されている。

app/router.options.ts

import type { RouterConfig } from '@nuxt/schema';

export default <RouterConfig>{
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { left: 0, top: 0 };
    }
  },
};

以下のPRで解決されるかもしれない

koyama shigehito

Full Static Generation

現在開発中のよう。

koyama shigehito

Nuxt3本体にrc.10からFull Static Generationの機能追加がされたのでそちらを使う。

koyama shigehito

OGP

OGP周りの設定を共通部分はnuxt.config.tsに記述して各ページのuseHead()で上書きするようにしていたが、OGPがtwitter側でキャッシュされていて、キャッシュがクリアになるまで新規で投稿したページが共通部分の表示になってしまう。

nuxt.config.tsにはOGP周りの設定を削除し、適宜layoutsコンポーネントやpagesコンポーネントで管理するようにした。

共通

https://md-meshi.com/

個別

https://md-meshi.com/recipe/2022-06-19

koyama shigehito

nuxi commands

現状11種類もある。

nuxi add

フォルダやファイルの作成ができる。

例

# Generates `components/TheHeader.vue`
npx nuxi add component TheHeader

nuxi analyze

アプリケーションの分析するらしい。
→やってみたが見方がよくわからない...

nuxi buid

ビルド。.outputディレクトリに書き出される。

nuxi cleanup

Nuxtファイルやキャッシュをクリアする。対象は以下
.nuxt .output node_modules/.vite node_modules/.cache
現状RC版でバグらしきものも多かったりするので結構使わせてもらっている。

nuxi dev

開発サーバーの起動（HMR）。デフォルトではhttp://localhost:3000

nuxi generate

事前レンダリングされたHTMLファイルを作成（静的ホスティングサービスで配信できる）。

nuxi info

プロジェクトの情報が表示される。OSや各種バージョン、使用モジュールなど。
GitHubにissueを上げるときなどに利用するとよいのかもしれない？

nuxi init

新規Nuxtプロジェクトを初期化して作成。

nuxi preview

buildコマンドでビルドしたアプリケーションのプレビューサーバーを起動。

nuxi typecheck

vue-tscを実行して、アプリ全体の型をチェックする。

nuxi upgrade

Nuxt 3を最新バージョンにアップグレード。
現状RC版が頻繁に更新されているのでこちらも結構使わせてもらっている。