使用 Nuxt 让 vue-awesome 工作

【问题标题】：Making vue-awesome work with Nuxt使用 Nuxt 让 vue-awesome 工作
【发布时间】：2018-07-27 19:08:09
【问题描述】：

我正在尝试使 vue-awesome 与我的 Nuxt 项目一起使用。

我用这个修改了我的 nuxt.config.js

vendor: ['vue-awesome']

我在我的 default.vue

中这样做了

import Icon from 'vue-awesome';

export default {
    components: {
        Icon
    }
}

但这给了我一个错误

没有定义窗口

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

【问题讨论】：

【解决方案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>

【讨论】：