使用 Nuxt 使 vue-awesome 工作

Question

我正在尝试让 vue-awesome 与我的 Nuxt 项目一起工作。

我用这个

修改了我的nuxt.config.js

vendor: ['vue-awesome']

我在 default.vue

中这样做了

import Icon from 'vue-awesome';

export default {
    components: {
        Icon
    }
}

但这给了我一个错误

window is not defined

然后我尝试从 default.vue 中删除导入，然后在我的页面中使用它。 chrome开发工具里有组件的代码，但是图标不可见，我需要修改我的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>

Making vue-awesome work with Nuxt