【Vue.js】Vuetifyのサンプルアプリを作成した！

2021 12/27

2020年1月25日 2021年12月27日

悩んでいる男の子

Vuetifyのサンプルアプリを作ってみたいんだけど、手順が分からないんだよね。。

こんな悩みを解決します。

本記事の内容

Vuetify導入方法
画像&ソースコード付きの具体的な手順

本記事の執筆者

プロフィール

長身ガリガリ自称イケメン(1993/4/1生)
元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
副業(物販)5か月目で月利30万円⇒脱サラ
物販、システム開発、アフィリエイト、投資を細々とやっています。
物販は彼女と楽しみながらやってます！

プロフィールページへ

今回は、Vue.jsにVuetifyを導入してみます。

前提

Vue CLIのアプリが存在すること

Vuetify導入

vue add vuetify

上記コマンドを実行します。

導入は終わりです。

エラーが色々と出るので、この後解消していきます。

エラー解消方法

構文エラー解消

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App), // ←カンマがないので追加。
}).$mount('#app');

「src/main.ts」にカンマがないので追加します。

「src/plugins/vuetify.ts」で良く分からないエラー発生

ERROR in C:/Users/泉　浩兵/Desktop/tmp/vue-dashboard/src/plugins/vuetify.ts(2,21):2:21 Could not find a declaration file for module 'vuetify/lib'. 'C:/Users/泉　浩兵/Desktop/tmp/vue-dashboard/node_modules/vuetify/lib/index.js' implicitly has an 'any' type.Try npm install @types/vuetify if it exists or add a new declaration (.d.ts) file containing declare module 'vuetify/lib';

「@type/vuetify」をインストールしてと言われるのでインストールします。

C:\Users\泉　浩兵\Desktop\tmp\vue-dashboard>npm install @types/vuetify
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fvuetify - Not found
npm ERR! 404
npm ERR! 404  '@types/vuetify@latest' is not in the npm registry.
npm ERR! 404 Your package name is not valid, because
npm ERR! 404  1. name can only contain URL-friendly characters
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\泉　浩兵\AppData\Roaming\npm-cache\_logs\2020-01-20T16_16_14_786Z-debug.log

404エラーが出るので、どうやらこの方法ではないみたいですね。。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest",
      "vuetify"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

結論、「tsconfig.jsonのcompilerOptions.typesに”vuetify”を追加する」と解決します。