Nuxt3 超入門

• 概要
• 環境
• プロジェクトの新規作成
• 必要なライブラリのインストール
• とりあえず動かす
• 書き換えてみる
• 参考サイト

概要

Vue を更に強化して使える Nuxt3 を使ってみました
プロジェクトのセットアップから簡単なサンプルを動作させるところまでやってみました

環境

• macOS 11.6.8
• nodejs 18.4.0
• npx 8.12.1
• yarn 1.22.19

プロジェクトの新規作成

• npx nuxi init nuxt-app

nuxi という専用の CLI ツールも同時にインストールされます

Need to install the following packages:
  nuxi@3.0.0-rc.6
Ok to proceed? (y) y
Nuxt CLI v3.0.0-rc.6                                                                                                               11:45:28
ℹ cloned nuxt/starter#v3 to /Users/xxx/data/repo/api/nuxt-app                                                             11:45:29
                                                                                                                                   11:45:29
 ✨ Your fine Nuxt project is just created! Next steps:

 📁  cd nuxt-app                                                                                                                   11:45:29

 💿  Install dependencies with npm install or yarn install or pnpm install --shamefully-hoist                                      11:45:29

 🚀  Start development server with npm run dev or yarn dev or pnpm run dev                                                         11:45:29

npm notice 
npm notice New minor version of npm available! 8.12.1 -> 8.15.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.15.1
npm notice Run npm install -g npm@8.15.1 to update!
npm notice 

必要なライブラリのインストール

• cd nuxt-app
• yarn install

yarn install v1.22.19
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning nuxt > @nuxt/vite-builder > cssnano > cssnano-preset-default > postcss-svgo > svgo > stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
[2/4] 🚚  Fetching packages...
warning vscode-languageclient@7.0.0: The engine "vscode" appears to be invalid.
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 29.24s.

とりあえず動かす

• yarn dev -o

これで localhost:3000 にアクセスするとサンプルページが確認できます

書き換えてみる

• vim App.vue

ボタンをクリックすると増加するサンプルです
動的に変更する値の場合には ref(0) のように定義する必要があります

script や template, style の構成は Vue や React などと変わりません
あとは使用できるコンポーネントなどリファレンスを見ながら追加すれば良いかなと思います

<script setup lang="ts">
const counter = ref(0)
const click = () => {
  console.log(counter.value);
  counter.value++;
}
</script>

<template>
  <div class="hello">
    {{ counter }}
    <button @click="click">up</button>
  </div>
</template>

<style scoped>
.hello {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3rem;
  padding: 10rem;
}
</style>

参考サイト

• https://v3.nuxtjs.org/getting-started/quick-start