Oction-vue in nuxt: unexpected identifier

Question

I would like to use the icons from Octicon, my project is written in nuxt.js, so I decided to use this Octicon Component for Vue.js. I created a file called octicon.js and added it to /plugins and registered it in nuxt.config.js. When I start my app, I get the message "unexpected identifier".

/plugins/octicion.js :

import Vue from 'vue'
import octicon from 'vue-octicon/components/Octicon.vue'

// Pick one way betweem the 2 following ways

// only import the icons you use to reduce bundle size
import 'vue-octicon/icons/repo'

// or import all icons if you don't care about bundle size
import 'vue-octicon/icons'

Vue.use(octicon);

In MyComponent.vue I use it like

<template>
   <div>
      <octicon name="repo-forked" label="Forked Repository"></octicon>
   </div>
</template>

nuxt.config.js looks like

   plugins: [
        "@/plugins/bootstrap-vue",
        "@/plugins/octicon.js"
    ],

My Browser shows me:

Where is my error?

Answer 1

Two things you probably need to do. The plugin is only required on the client side so you should specify this in nuxt.config.js:

plugins: [
    "@/plugins/bootstrap-vue",
    { src: '~/plugins/octicon.js', mode: 'client' }
  ]

Secondly you may need to add it to the transpile build option, also in nuxt config.js:

build: {
    transpile: ['octicon.js']
  }

You may also want to wrap the <octicon> tag in a <no-ssr> tag.