Vuetify Vue CLI パッケージを使用すれば、(公式ページの例を元に) プロジェクトの開発が今すぐ始められます。Vuetify は SSR (サーバーサイド・レンダリング)、SPA (シングルページ・アプリケーション)、PWA (プログレッシブ・ウェブアプリ)、そして、標準の HTML ページのすべてをサポートしています。

サポートしているブラウザ

Vuetify は、ウェブ開発を次のレベルへ進めるプログレッシブフレームワークです。この目的を達成するために、古いバージョンの Internet Explorer には一部制限があります。次の表は包括的なリストではありませんが、メインターゲットとしているブラウザの一覧です。

Chromium (Chrome, Edge Insider)
対応
Firefox
対応
Edge
対応
Safari 10+
対応
IE11 / Safari 9
Polyfillで対応
IE9 / IE10
非対応

新しいアプリケーション

Vue CLI 3は、より簡単に開発を開始可能にする次世代のCLIツールです。Vue CLI 3を使ってアプリケーションを作ると、公式のwebpackアップデートとコンフィグの変更が利用可能になり、面倒なアップグレード作業をやらずにVuetifyを更新できるようになります。

CLI のインストールが完了したら、新しいプロジェクトのテンプレートを生成することができます。特定のパッケージ (たとえば、vuexvue-router など) を追加する必要がないのであれば、デフォルトインストール を選択してください。これにより、選択したオプションが設定済みの新しい Vue プロジェクトが作成されます。

ヒント: もしすでに Vue CLI がインストール済みである場合、ターミナルで vue --version とタイプして最新版に更新されているかどうかを確認してください。

プロジェクトの初期化が終わったら、CLI を使用して Vuetify パッケージ を追加することができます。

ここではインストール内容をカスタマイズするためのオプションを選択できます。デフォルトプリセットでは a-la-carte が有効になっています。

インストールが完了したら、yarn serve あるいは npm run serve を実行してアプリケーションをスタートしましょう。

Vue UI のインストール

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

これにより、Vue のユーザーインターフェイスが実行され、 新規ウィンドウ がブラウザで開きます。ページ左側の プラグイン をクリックします。そして Vuetify と入力して検索してください。

Vuetify プラグインのインストール

インストールが完了したら、アプリケーションのデフォルトの Vuetify 設定を行うことができます。

Vuetify インストールの設定

既存のアプリケーション

Vuetifyを既存のアプリケーションに追加するには、 npm package をインストールする必要があります。 npm あるいは yarnのどちらを使っても追加できます。これらはアプリケーション上でどのようなリソースを利用可能にするかを管理するためのパッケージマネージャーです。

npm の実行方法については、npmの公式ドキュメントを参照してください。yarnを使いたい場合は、yarnの公式ドキュメントを参照してください。セットアップ後、CLIからコマンドを実行できるようになります。

Vuetifyがインストールされたら、srcディレクトリの下にpluginsディレクトリを作ってください。内部に vuetify.js ファイルを追加します。ここにVuetifyのブートストラップとセットアップに関する全てを記述していきます。

vuetify-loader インストール

Vuetifyをインストールする方法は3つあります。1つ目の方法(おすすめ)は、自動 A-la-carte と呼んでいるvuetify-loaderを使った方法です。この方法ではVuetifyの必要な機能とスタイルだけが利用されていることが確かめられつつ、コンパイル後のアプリケーションサイズが大きく削減されます。vuetify/libからVuetifyをインポートすると、必要なスタイルも自動でインポートされることを覚えておいてください。

もしVue CLI 3パッケージを使えない理由がある場合は、vue.config.js あるいは webpack のconfigを使って手動でインストールすることもできます。詳しくはA-la-carte pageを参照してください。

アラカルト・インストール

vuetify-loader を使用せずに、一つひとつのコンポーネントを手動でインポートして使用することも可能です。次は、手動で用意した アラカルト の一例です。

フル・インストール

最後は、Vuetifyの全ての機能とスタイルをインポート・設定する方法です。ただし前述の通り、出来るだけvuetify-loaderを使ってインストールする方法がおすすめされています。この方法では、手動でスタイルを読み込む必要があります。この方法は、実行時にブラウザからVuetifyを読み込み初期化するやり方でも使われます。ブラウザからVuetifyをインストールする方法についてはcdn quickstartを参照してください。

Webpackでのインストール

フル / A-la-carteいずれの場合でも、Webpackを使ってアプリケーションの設定をすることができます。ただし、sassファイル用のルールを追加(あるいは既存のものを変更) する必要があります。まずは、必要な依存パッケージをインストールしましょう:

インストールが終わったら、webpack.config.jsrulesに下のスニペットをコピーします。すでにsassのルールを設定している時は、下記のスニペットの一部あるいは全てを適用する必要があるかもしれません。vuetify-loaderの利用を考えている場合は、A-la-carteにWebpackとあわせて利用する際の情報が記述されています。

If you are using version v8 of the sass-loader, you will need to change your options object.

Vuetifyオブジェクトのブートストラップ

src/plugins/vuetify.jsでVuetifyの設定をしたら、それをVueインスタンスに渡してあげます。この処理の流れは vue-routervuex と同様です。

フォントのインストール

VuetifyはMaterial Design Specificationに基づき、Google Robotoフォントを利用します。このフォントを利用する一番簡単な方法は、メインとなるindex.html<head><link>タグを追加することです。

webfontloaderを使って非同期で読み込ませることもできます。

MDI アイコンフォント

Vuetifyは標準のアイコンフォントにMaterial Design Iconsを使用します。最もシンプルなインストール方法はnpmを使ったインストールです。

パッケージをインストールしたら、pluginsフォルダのvuetify.js内でシンプルにインポートします。

他のアイコンフォントの使い方やさらなる情報についてはIcons を参照してください。

CDN の使用

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

Edgeのサポート

vuetify/libはES6を使用していますが、これはEdgeブラウザ(非chromium) で問題を起こしてしまいます。また、vuetify/libはVue CLI 3の**modern mode**をサポートするため、トランスパイルされません。なので、Vue CLIにvuetify`パッケージをトランスパイルするように指示する必要があります。将来的にはこの対応は現在バグフィックスのため保留になっているvue-cli-plugin-vuetifyによって自動的に行われるようになる予定です。

IE11とSafari 9のサポート

VuetifyはES2015/2017の機能を使用しており、Internet Explorer 11Safari 9/10で動作させるためにPolyfillを使う必要があります。Vue CLI 3を使っている場合、この対応は自動的に行われます。使っていない場合はプロジェクトのディレクトリでbabel-polyfillをインストールできます:

その際、メインとなるindex.jsファイルで可能な限り早いタイミングでプラグインをインクルードするのが重要です。Vuetify SSRパッケージの場合は, client-entry.jsファイルになります。

babel-preset-envと対応するPolyfillを使って、アプリケーションに必要なPolyfillのみが追加されていることを確認するのをおすすめします。詳しい情報はドキュメントを参照してください。

インストールが終わったら、.babelrc または babel.config.jsにプリセットを追加します。

Internet Explorerは<template>タグへの対応が限定的なので、完全なコンパイル済みのDOMをブラウザに送る必要があります。これは、Vueコードをあらかじめビルドしておくか、DOM要素を置き換えるためのヘルパーコンポーネントを作ることで対応できます。例えば、IEに直接下記のようなコードを送るとエラーになります:

Edit this page on Github | Translate on Crowdin
Vuetify
StoreFor Enterprise