Work with vue-awesome

[CDuane]

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)}

[CDuane]

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.

[Atinux]

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>

[bartdominiak]

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.<anonymous> (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.<anonymous> (.nuxt/index.js:25:14)
    at __webpack_require__ (webpack:/webpack/bootstrap 2ed152b011919e9b5af8:25:0)

[sobolevn]

@bartdominiak this happens to me as well.

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

[sobolevn]

Downgrade to nuxt==0.10.7 solved my issues.

[jankal]

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

@Atinux @pi0 Please reopen!

[MajoDurco]

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.

[uptownhr]

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

[abdokouta]

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 },]

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

[manniL]

https://codesandbox.io/s/github/manniL/nuxt-vue-awesome-example/tree/master/