How to upgrade vue-codemirror from v3 to v4? about vue-codemirror HOT 9 CLOSED

You need import the codemirror css.

import 'codemirror/lib/codemirror.css'

from vue-codemirror.

You may need to see the latest instructions for CHANGELOG.md, and README.md because there are some incompatible updates.

from vue-codemirror.

I still can't get v4 to work.

This is how I configure v3 (note I have left code not relating to CodeMirror out for clarity). Working fine but when changing package.json to v4 and updating npm, I get empty screen - no CodeMirror and also no error in console.

<template>
<codemirror v-model="data" :options="editorOptions" />
</template>
<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/addon/selection/active-line.js'
export default {
    components: {
        codemirror
    },
    data () {
        return {
            data: '',
            editorOptions: {
                readOnly: false,
                indentUnit: 4,
                mode: 'text/javascript',
                theme: 'base16-dark',
                styleActiveLine: true,
                extraKeys: {
                    Tab: function (cm) {
                        if (cm.somethingSelected()) {
                            cm.indentSelection('add')
                        } else {
                            cm.execCommand('insertSoftTab')
                        }
                    },
                    'Shift-Tab': function (cm) {
                        cm.indentSelection('subtract');
                    }
                }
            }
        }
    }
</script>
<style>
    .CodeMirror {
        height: 800px;
    }
</style>

from vue-codemirror.

I didn't need to do that with v3.
I have added import CSS on v4, now I see codemirror instance but it has default style. It appears that the theme I set in the option is not applied.

from vue-codemirror.

Looks like I need to import CSS specific to the theme set. This must somehow be done automatically with v3.

import 'codemirror/theme/base16-dark.css'

from vue-codemirror.

With import 'codemirror/lib/codemirror.css', vue-codemirror v4 is working. But with import 'codemirror/theme/base16-dark.css', codemirror is not working. I cannot set focus to codemirror and cannot enter text into the editor. All I see is black background.

from vue-codemirror.

Seems like the actual editor is offset to outside of the black background area - hence I thought the editor is missing. Not sure why the offset is all wrong with any theme, without theme working fine.

from vue-codemirror.

It seems that for theme to work correctly, I still need to import the default css in addition to the theme css.

import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/base16-dark.css'

from vue-codemirror.

thanks @layanto, I find readOnly parameter here :)

from vue-codemirror.