Making vue-awesome work with Nuxt

Question

I am trying to make vue-awesome work with my Nuxt project.

I modified my nuxt.config.js with this

vendor: ['vue-awesome']

I did this in my default.vue

import Icon from 'vue-awesome';

export default {
    components: {
        Icon
    }
}

But this gives me an error

window is not defined

---

Then I tried removing the import from default.vue and just use it in my page. The component's code is there in the chrome dev tools, but the icon is not visible, do I need to modify my webpack configuration or something?

Answer 1

The answer has been answered on the official repository.

You need to use the nuxt plugins to register the component as global.

Example:

nuxt.config.js

module.exports = {
  build: {
    vendor: ['vue-awesome']
  },
  plugins: ['~plugins/vue-awesome.js']
}

plugins/vue-awesome.js

import Vue from 'vue'
import Icon from 'vue-awesome/components/Icon.vue'
require('vue-awesome/icons')

Vue.component('icon', Icon)

Then in your pages and components, you can use the component:

pages/index.vue

<template>
  <div>
    <h1>Welcome!</h1>
    <icon name="camera"></icon>
  </div>
</template>