Nuxt3 stable版の機能調査

satjopg 2022/11/27に更新

プロジェクトの開始(以前と変わらず)

npx nuxi init <プロジェクト名>
cd <プロジェクト名>

package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "3.0.0"
  }
}

"nuxt": "3.0.0"が確認できます

satjopg 2022/11/27

src配下にまとめたいので設定ファイルに以下を追記

nuxt.config.ts

export default defineNuxtConfig({
+  srcDir: 'src/'
})

satjopg 2022/11/28

レンダリングはページごとに決めることが可能となった。(Nuxt2にはなかった機能)
(一律設定も変わらず可能)

設定ファイル内のrouteRulesで個別に設定できる

※ ssr: false とすることでCSRオンリーのアプリケーションとなる. 一律設定としても可能(その場合はrouteRules内ではなくjsonの第一階層でssr: falseとすればOK)
※ SSG = prerender (と認識) する場合は ssr: true とする(デフォルト). nuxi generate で生成することが可能.
※ swrを指定するとISR をすることが可能となる

satjopg 2022/11/28

sass入れる

npm i -D sass sass-loader

SFC内ではこんな感じで利用可能になる。

<style lang="scss" scoped>
  .hoge {
    ....
    &__fuga {
      ....
    }
  }
<style/>

共通sassファイルを扱いたいときにはassetsディレクトリに配置して設定ファイルでexportする

satjopg 2022/12/01に更新

Vuetifyいれる

※ npm i -D vuetify だと2系をいれようとしてエラーになるためバージョンを指定する

npm i -D vuetify@3.0.2

pluginが現状用意されていないので自前で作成する
記述はマニュアルステップに書かれているものと同じ感じで作成

plugins/vuetify.ts

import { createVuetify } from 'vuetify'

import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives
  })
  nuxtApp.vueApp.use(vuetify)
})

一旦これで読み込みはしてくれてそうなので先にすすめる。
実装していて足りなかったらこのスレに追記していく