nuxt.jsでVuetifyを使用する方法

Vuetifyについて

動作環境

• Visual Studio Code 1.43.2
• Windows 10 Pro 20H2

実装

1. Nuxt.jsのプロジェクトを作成

• Package managerはNpmを指定し、それ以外はデフォルトで設定

$ npx create-nuxt-app use-vuetify
? Project name: use-vuetify
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: (Press to select, to toggle all, to invert se
lection)
? Linting tools: (Press to select, to toggle all, to invert sele
ction)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press to select, to toggle all, to invert
selection)
? What is your GitHub username? wataru-sakuraba
? Version control system: Git
~~~

1. 動作確認

   $ cd use-vuetify
   $ npm run dev
   

   • 上記のコマンドを実行し、localhost:3000にアクセスすると、以下のようなNuxt.jsのページが表示されます

2. プロジェクトにVuetifyをインストール

   $ npm install --save-dev @nuxtjs/vuetify
   

3. nuxt.config.jsを修正

   nuxt.config.js

   export default {
     ・・・
     // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
     buildModules: [
       '@nuxtjs/vuetify',
     ],
   }
   

4. Vuetifyを使用したコードを追加

   index.vue

   <template>
     <v-container>
       <v-row justify="center">
         <v-col cols="6">
           <v-card>
             <v-card-title>Hello, Vuetify!</v-card-title>
           </v-card>
         </v-col>
       </v-row>
     </v-container>
   </template>
   
   <script>
   export default {}
   </script>
   
   

5. ローカルサーバーを再度立ち上げると、以下のような画面が表示されます

   $ npm run dev
   

   

感想

• Vuetifyは初めて使いましたが、サンプルなども豊富にあり、アイコンなども簡単に使用できるため、WEBページ作成には非常に便利だと思います。

参考