[Nuxt] Installation instructions

[darthf1]

Hi, I'm wondering if you're willing to provide instructions to install this template in Nuxt? I'm willing to provide a PR, but I need help with the icons.

To install @coreui/vue, you need to create a Nuxt plugin:

~/plugins/coreui.ts

import Vue from 'vue'
import CoreuiVue from '@coreui/vue'

Vue.use(CoreuiVue)

Then, in /nuxt.config.ts:

  plugins: [
    { src: '~/plugins/coreui', mode: 'client' }
  ],

Then if you copy the template files from this repo to the corresponding folders you're good to go.

The issue is with the icons, which don't show. In the template, the icons are installed as Vue component options in main.js

I tried the same by making icons available through

import Vue from 'vue'
import { iconsSet as icons } from 'assets/icons/icons.js'

Vue.prototype.icons = icons

Which makes it available on this.$root.icons, but still no icons showing. I also tried it through Vue.extend, but i get the same result.

import Vue from 'vue'
import { iconsSet as icons } from 'assets/icons/icons.js'

Vue.extend({ icons })

In the console, i get the following warning:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

But I guess this is related to the misconfiguration of the icons on my end, resulting in faulty html because the value between <svg> tags is currently undefined

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" class="d-block c-icon c-icon-custom-size" height="35" view-box="0 0 556 134">undefined</svg>

In CIconRaw.vue line 55-58, I noticed the following code:

const icon = this.$root.$options.icons[this.iconName]
if (!icon && process && process.env && process.env.NODE_ENV === 'development') {
  console.error('CIcon: "' + this.iconName + '" is not registered in $root.icons object. For CIcon docs visit https://coreui.io/vue/docs/components/icon.html')
}

An icon is created by searching in this.$root.$options.icons but the error is referring to this.$root.icons. Is this correct?

[woothu]

We are considering making nuxt starter pack in PRO version, for now, we have the 'basic starter' and the 'typescript starter' available. Anyway, starters are PRO version features.

Nevertheless, it is appreciated if you make your own nuxt version, but we will not maintain it. We will link to such a version in our README.

Concerning your problem, did you try passing 'icons' object to the context? https://nuxtjs.org/api/context/

The message in CIcon could be more informative (vue is passing icons to $options.icons automatically)

[darthf1]

Ok, thanks.

Thanks for your suggestion regarding the context! Leaving the solution here for reference:

import { iconsSet } from 'assets/icons/icons'
import { NuxtAppOptions, Plugin } from '@nuxt/types'
import Vue, { VueConstructor } from 'vue'
import { CIcon } from '@coreui/icons-vue'

declare module '@nuxt/types' {
  interface NuxtAppOptions {
    icons: { [key: string]: string[] }
  }
}

const CoreUiIconComponent = {
  install(Vue: VueConstructor): void {
    Vue.component('c-icon', CIcon)
  }
}

Vue.use(CoreUiIconComponent)

const coreUiIcons: Plugin = ({ app }) => {
  app.icons = iconsSet
}

export default coreUiIcons

[woothu]

Concerning nuxt template, there already exist such project, and it will be updated to version 3 https://github.com/muhibbudins/nuxt-coreui/issues/15

[stefano-pietroiusti]

For nuxt.js, we can use a vanilla plugin as follows... import Vue from 'vue' import { iconsSet } from 'assets/icons/icons' import { CIcon } from '@coreui/icons-vue'

Vue.component('c-icon', CIcon)

export default ({ app }) => { app.icons = iconsSet }

[Necrometal]

Hi, have you any docs on how to implement it in nuxt? :) i've tried but it's not working, maybe i've done it wrong but i'm note sure