💁

Vue 3の時代にVue 2・Vuetify 2をインストールしてみる

2024/06/09に公開

2024年6月現在、Vue 3が主流になっていますが、Vuetify 3の変更点を確認するためにVue 2の環境を用意することがあります。新規プロジェクトではVue 2を利用しませんが、Vuetify 3のアップデートに伴う変更点を確認するための環境を構築する方法をまとめました。

以前は、vue-cliがボイラーテンプレートとして利用されていましたが、現在はViteの登場により新規プロジェクトではViteを利用することが一般的です。本記事では、Viteを利用してVue 2とVuetify 2をインストールする手順を紹介します。

環境

  • Node.js 20.12.1
  • Vue v2.7.16
  • Vuetify v2.6.14

Vue v2.7.16 リリースノート
Vuetify v2.6.14 リリースノート

Viteでインストールする

対話式でViteを呼び出します。選択項目で「Vue」を選ぶとVue 3がインストールされるため、「Vanilla」を選択して、後で直接Vue 2をインストールします。

コマンド実行

npm init vite

必要なパッケージをインストールします。

npm install
npm run dev

プロジェクトを作成して、vue2-vuetify2ディレクトリに移動し、npmでインストール・起動します。

cd vue2-vuetify2
npm install
npm run dev

これで、以下のような画面が表示されます。

初期画面

Vue 2のインストール

起動を止めて、次にVue 2を直接インストールします。バージョンを固定してインストールし、必要なプラグインもインストールします。

npm install vue@2.7.16
npm install -D vite
npm install -D @vitejs/plugin-vue2

vite.config.jsの作成

次に、vite.config.jsを作成し、Vue 2をプラグインから呼び出す設定を行います。

touch vite.config.js

内容を以下のようにします。

// vite.config.js
import vue from '@vitejs/plugin-vue2';

export default {
  plugins: [vue()]
};

サンプルソースの書き換え

main.jsのコードをVue用に修正します。

import Vue from 'vue';

new Vue({
    el: '#app',
    data: {
        message: 'Hello World'
    },
    template: `<div>{{message}}</div>`,
});

Vuetify 2をインストールする

次にVuetifyをインストールします。

npm install vuetify@2.6.14

vite.config.jsの編集

Vuetifyのコンポーネントを呼び出せるようにvite.config.jsを修正します。

npm install path

以下の内容に修正します。

import vue from '@vitejs/plugin-vue2';
import path from 'path';

export default {
  plugins: [vue()],
  resolve: {
    alias: [
      { 
        find: /^@\/(.+)/,
        replacement: path.resolve(__dirname, 'src') + '/$1'
      }
    ]
  }
};

App.vueファイルの追加

srcフォルダを作成し、App.vueを追加します。表示確認用にVuetifyのコンポーネントを追加します。

<template>
  <v-app id="app">
    <v-container>
      <v-btn color="primary" large>Vuetify 2 Button</v-btn>
    </v-container>
  </v-app>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

vuetify.jsの追加

src/vuetify.jsを追加し、Vuetifyの設定ファイルを作成します。

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

const opts = {};

export default new Vuetify(opts);

main.jsの修正と移動

main.jssrcに移動し、作成したVuetifyの設定ファイルをインポートします。また、App.vueファイルをrenderに追加します。

import Vue from 'vue';
import App from './App.vue';
import vuetify from './vuetify.js';

new Vue({
  vuetify,
  render: (h) => h(App),
}).$mount('#app');

起動

再度npm run devで起動し、App.vueに追加したVuetifyのコンポーネントが表示されたら完成です。

npm run dev

完成画面

リポジトリ

今回の作成したリポジトリは以下になります。

https://github.com/redamoon/vue2-vuetify2

参考記事

これでVue 2とVuetify 2の開発環境を構築する手順が完了です。

株式会社HAMWORKS

Discussion