Loading codemirror with Nuxt SSR

[Mikaleb]

BUG REPORT TEMPLATE

Vue.js version and component version

"nuxt": "^2.15.7",

Reproduction Link

Indepently from where you load vue-codemirror, the dependency to codemirror/lib/codemirror.js building without check to SSR make the whole project crash :

Steps to reproduce

As per the doc says :

resolve.alias takes precedence over other module resolutions. I think the problem revolves around that

What is Expected?

Not loading codemirror.js if SSR

What is actually happening?

Loading it, having this error :

navigator is not defined

[dadaphl]

I had the same issue. I changed the way I load vue-codemirror. I'm not exactly sure why this fixed the problem for me. Maybe the it's because for some reason I was convinced to import {codemirror} instead of VueCodemirror from the package. I hope this helps you as well.

Before I imported it directly in my component like so:

<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/css/css.js'
 export default {
  components: {
    codemirror
  },
   props: {
...

turns out its better to add a entry to the plugins section in your nuxt.config.js like so:

...
   plugins: [
     { src: '@/plugins/vue-codemirror', ssr: false },
...

and create a respective file in the plugins folder with this content:

plugins/vue-codemirror.js:

import Vue from 'vue'
import VueCodemirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/css/css.js'
Vue.use(VueCodemirror)

then you can just use the compontent directly in your template section of your desired page or component without any import in the script section.

<client-only>
  <codemirror
    ref="cmEditor"
    :value="value"
    :options="cmOptions"
    @input="onCmCodeChange"
    @ready="onCmReady"
  />
</client-only>

[rahulkumarsingh73690]

What about nuxt 3?