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 <space> to select, <a> to toggle all, <i> to invert se
   lection)
   ? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert sele
   ction)
   ? Testing framework: None
   ? Rendering mode: Universal (SSR / SSG)
   ? Deployment target: Server (Node.js hosting)
   ? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert 
   selection)
   ? What is your GitHub username? wataru-sakuraba
   ? Version control system: Git
   

2. 動作確認

   $ cd use-vuetify
   $ npm run dev
   

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

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

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

4. nuxt.config.jsを修正

   nuxt.config.js

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

5. 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>
   
   

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

   $ npm run dev
   

   

感想

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

参考