クイックスタート

Vue CLI は、アプリケーションの構築の複雑さを抽象化するために作られた次世代の cli ツールです。Vue CLI でアプリを起動すると、公式の WebPack の更新や構成の変更、Vuetify の更新を困難なアップグレードプロセスなしで取得することもできます。

新しいVue.jsプロジェクトをまだ作成していない場合は、Vue CLI を使用し、次のように入力することで新規作成できます:

インスタンス化されたプロジェクトができたので、cliを使用して Vuetify Vue CLIパッケージ を追加できます。

Vuetifyは、Vue CLIの新しいビジュアルアプリケーションである Vue UI を使用してインストールすることもできます。VueCLIの最新バージョンがインストールされていることを確認してから、ターミナルに次のコマンドを入力します：

Vueユーザーインターフェイスが起動し、ブラウザで 新しいウィンドウ が開きます。ページ左側の プラグイン をクリックします。開いたページで Vuetify と入力して検索してください。

Vuetifyを追加するには、 Nuxt Vuetifyモジュール をインストールします。

インストールしたら、 nuxt.config.jsファイルを更新して、ビルドにVuetifyモジュールを含めます。

Nuxtのインストールの詳細については、 公式ドキュメント をご覧ください。

VuetifyをWebpackプロジェクトにインストールするには、いくつかの依存関係を追加する必要があります。

インストールしたら、 webpack.config.jsファイルを見つけて、以下のスニペットを rules 配列にコピーします。既存の sass ルールが設定されている場合、以下の変更の一部またはすべてを適用する必要があります。ツリーシェーキングに vuetify-loader を使用する場合は、Webpackのバージョン >=4であることを確認してください。 A-la-carte ページでwebpackを使用した設定の詳細を見つけることができます。

Vuetify用のプラグインファイル、 src/plugins/vuetify.js を以下の内容で作成します。

vuetify-loader を使用する場合は、以下の内容を適用します:

Vue インスタンスを初期化しているアプリケーションの main エントリーポイントに移動して、Vuetify オブジェクトをオプションとして渡してください。

Vuetify は Google の Roboto フォントおよび Material Design Icons を使用します。これらをインストールする最も簡単な方法は、メインの index.html に CDN を含めることです。

Vue CLIのテンプレートを使わずにVuetify.jsを試すには、下記のコードをindex.htmlに貼り付けてください。最新のVueとVuetifyを使って、コンポーネントを試すことができます。codepenのVuetify starterを使うこともできます。おすすめはされていませんが、もし本番環境でCDNパッケージを利用する場合は、アセットのバージョンを指定するようにしましょう。詳しいやり方はjsdelivrを参照してください。

Vuetifyを Electron で使用するには、Vue CLIでelectron-builder プラグインを追加します。

Vue CLI で新しいアプリを作成する場合は、 vue create my-appを実行した後、最初のプロンプトで Progressive Web App (PWA) Support を選択するオプションがあります。このパッケージは、次のコマンドを入力して、既存の Vue CLI プロジェクトにインストールすることもできます。

Vuetify を Cordova で使用するには、Vue CLIで Cordova プラグインを追加します:

Vuetify を Corodova で使用するには、Vue CLIで Capacitor プラグインを追加します。

There are 2 ways we can use Vuetify with default vuepress theme. Either by registering vuetify as a plugin in vuepress .vuepress/enhanceApp.js file (code sample below), or by using vuetify directly from CDN: