Nuxt.js + VuetifyでFontAwesomeを使用する

Nuxt.jsでVuetifyを使用するときに、Vue.jsのときのようにplugins/vuetify.jsがなくどこで設定すればいいのか迷ったのでメモ。

FontAweSomeをインストール

ここは公式通り。

yarn add @fortawesome/fontawesome-free -D
// OR 
npm install @fortawesome/fontawesome-free -D

nuxt.config.jsに追加

nuxt.config.jsのvuetifyに以下を追加

nuxt.config.js

   vuetify: { 
++   defaultAssets: {icons: 'fa'}
     customVariables: ['~/assets/variables.scss'], 
     theme: { 
      dark: true, 
       themes: { 
         dark: { 
           primary: colors.blue.darken2, 
           accent: colors.grey.darken3, 
           secondary: colors.amber.darken3, 
           info: colors.teal.lighten1, 
           warning: colors.amber.base, 
           error: colors.deepOrange.accent4, 
           success: colors.green.accent3 
         } 
       } 
     } 
   }, 

これでOK。

<v-icon>fas fa-pen</v-icon>