Nuxt.js: Work with vue-awesome

Created on 29 Jan 2017 · 11Comments · Source: nuxt/nuxt.js

Hi, I am trying to get this awesome framework to work with vue-awesome but I can't manage to do it.

I added this to my nuxt.config.js
build: { vendor: ['vue-awesome'] }

I added this to my default.vue

import Icon from "vue-awesome/components/Icon.vue"; import "vue-awesome/icons";

export default { components: { Icon } }

However when I put icon components in my pages, it does not show, but is visible in the chrome dev tools.

Is there a proper way to do this?

I am new to Nuxt.
Thanks for your help.

_{This question is available on Nuxt.js community (#c147)}

question

Source

CDuane

Most helpful comment

For me import error was solved by telling webpack to include vue-awesome into the bundle.
So I added this lines into my nuxt.config.js:

const nodeExternals = require('webpack-node-externals')
module.exports = {
  ...
  build: {
    extend (config, { isServer }) {
      if (isServer) {
        config.externals = [
          nodeExternals({
            whitelist: [/^vue-awesome/]
          })
        ]
      }
    }
}

Also you can take a look at #438.

MajoDurco on 10 Sep 2017

👍6 🎉1

All 11 comments

Ok I have found what the problem was. I was doing the import in the layout file, so that I refrain from having to import vue-awesome in each page.

However is there a way where I can import it once and the Icon component be usable in every component? This is why I was trying to import it in the layout.

CDuane on 29 Jan 2017

Hi @CDuane

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 <icon> component:

pages/index.vue

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

Atinux on 29 Jan 2017

🎉1 👍1

Hey,

I'm getting an error
```
Nuxt.js Error:

/Users/mac/Sites/nuxt-blog/node_modules/vue-awesome/icons/flag.js:1
(function (exports, require, module, __filename, __dirname) { import Icon from '../components/Icon.vue'
^^^^^^

SyntaxError: Unexpected token import
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:533:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at r (/Users/mac/Sites/nuxt-blog/node_modules/vue-server-renderer/build.js:5812:16)
at Object. (webpack:/external "vue-awesome/icons/flag":1:0)
at __webpack_require__ (webpack:/webpack/bootstrap 2ed152b011919e9b5af8:25:0)
at Object.module.exports.Object.defineProperty.value (plugins/vue-awesome.js:3:0)
at __webpack_require__ (webpack:/webpack/bootstrap 2ed152b011919e9b5af8:25:0)
at Object. (.nuxt/index.js:25:14)
at __webpack_require__ (webpack:/webpack/bootstrap 2ed152b011919e9b5af8:25:0)

bartdominiak on 23 Jul 2017

👍7

@bartdominiak this happens to me as well.

I am using "nuxt": "latest",
@Atinux any suggestions?

sobolevn on 31 Jul 2017

Downgrade to nuxt==0.10.7 solved my issues.

sobolevn on 31 Jul 2017

@sobolevn @bartdominiak Same issue here. What can one do to make this work again?

@Atinux @pi0 Please reopen!
vue-awesome

jankal on 6 Sep 2017

For me import error was solved by telling webpack to include vue-awesome into the bundle.
So I added this lines into my nuxt.config.js:

const nodeExternals = require('webpack-node-externals')
module.exports = {
  ...
  build: {
    extend (config, { isServer }) {
      if (isServer) {
        config.externals = [
          nodeExternals({
            whitelist: [/^vue-awesome/]
          })
        ]
      }
    }
}

Also you can take a look at #438.

MajoDurco on 10 Sep 2017

👍6 🎉1

The issue is with vue awesome. They need to release transpiled version of the code.

uptownhr on 4 Apr 2018

Hi @CDuane

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 <icon> component:

pages/index.vue
<template>
  <div>
    <h1>Welcome!</h1>
    <icon name="camera"></icon>
  </div>
</template>
plugins: [{ src: '~plugins/vue-awesome', ssr: false },]