Vue3 を触ってみた

• 概要
• 環境
• インストール
• プロジェクト作成
• vue3 にアップグレード
• とりあえず動かす
• vuetify が使えるか試す
• コーディングを進める
• 参考サイト

概要

過去に Vue2 + vuetify を試しました
今回は Vue3 を試してみました
ちなみに執筆時点ではまだ beta 版になります

環境

• macOS 11.6.7
• node 18.4.0
• yarn 1.22.19

インストール

• brew install yarn
• yarn global add @vue/cli

プロジェクト作成

• vue create hello-world

vue3 にアップグレード

• vue upgrade --next

プロジェクト作成時に vue3 を選択した場合は不要です

とりあえず動かす

• cd hello-world
• yarn serve

これで localhost:8080 で vue3 で動作しているサンプルを確認できます

vuetify が使えるか試す

• vue add vuetify

? Choose a preset: (Use arrow keys)
  Configure (advanced) 
❯ Default (recommended) 
  Vite Preview (Vuetify 3 + Vite) 
  Prototype (rapid development) 
  Vuetify 3 Preview (Vuetify 3)

とりあえず Default を選択します
すると

Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.

となりインストールできず使えませんでした

コーディングを進める

あとは

• src/components/HelloWorld.vue
• src/App.vue

このあたりを書き換えながらやれば動くものが作れます

参考サイト

• https://v3.ja.vuejs.org/guide/introduction.html