使用Nuxt进行vue-awesome工作

Question

我正在努力让vue-awesome与我的Nuxt项目合作。

我使用此

修改了 nuxt.config.js

vendor: ['vue-awesome']

我是在 default.vue

中完成的

import Icon from 'vue-awesome';

export default {
    components: {
        Icon
    }
}

但这给了我一个错误

  

窗口未定义

然后我尝试从 default.vue 中删除导入，并在我的页面中使用它。 组件的代码在chrome dev工具中，但图标不可见，我是否需要修改我的webpack配置？

Answer 1

答案已在official repository上得到解答。

您需要使用nuxt plugins将组件注册为全局。

示例：

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)

然后在您的页面和组件中，您可以使用组件：

pages/index.vue

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