Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

FabianH's avatar

VueJS and Codemirror?

Hey Laracasts forum!

I have been searching for a solution to use codemirror in vuejs, but i did not really find any results trough google.

I'm fairly new to vuejs so please bear with me.

Im trying to accomplish this

var editor_two = CodeMirror.fromTextArea(document.getElementById("css-editor"), {
        lineNumbers: true,
        matchBrackets: true,
        styleActiveLine: true,
        theme: "material",
        mode: "css"
    });
    editor_two.on("change", function () {
        editor_two.save();
    });

in vuejs

I tried to avoid doing it in vuejs, but it seems like that the v-model of the textarea does not get updated

<textarea name="customfields" id="customfields-editor" v-model="questionnaire.customfields">{!! $questionnaire->customfields !!}</textarea>

Did anyone face a similar problem, and maybe can guide me in the right direction?

Thank you for your help!

0 likes
10 replies
FabianH's avatar

Bump - did anybody face the same issue?

jekinney's avatar

What is the html output in the web browser? I believe you will not see v-model in there. Instead you may have to tie into the same way code mirror cascades down to the text area. If I remember correctly. It's been a few months.

jekinney's avatar

I remember I used nextTick inside Vue to instantiate code mirror. I then used code mirrors method to get the input and set it to a Vue data variable on keyup to also show a preview and saved via API through vue and laravel. Basically used code mirror like a package.

RyC37's avatar

Right now I encountered the same problem and Google took me here. Could you please teach me if you got solution?

jimmck's avatar

@FabianH What exactly to you want Vue for? Why not just put the editor in one div and your Vue model in another. You can still exchange data. Or build a simple Vue Div component to host the editor. I assume the editor manages its own text area now.

FabianH's avatar

@RyC37 i did not really get the perfect solution, but I just called "getValue" when I'm saving. For my case I really did not need the two way binding.

pkAutoConnect's avatar

@jekinney Trying to extract data from CodeMirror texture and saving it back to laravel. I am using Vue.js as my JS library.

Current issue is that the getValue function addes "\n" to my data which will mess up my files. Can you suggest a better line separator ? Basically I my page allows the user to edit "HTML files" through Code Mirror.

$(document).ready(function () {
    
    window.codemirror2 = CodeMirror($('#editor2').get(0), {
        value: $("#sparql-sample-1").html(),
        mode: "sparql",
        styleActiveLine: true,
        lineNumbers: true,
    });
});

new Vue({
    el: '#app',
    data: {
        content: ''
    },
    methods: {
        onSubmit: function () {
                this.content = window.codemirror2.getValue('');
        }
    }
});
pkAutoConnect's avatar

@jekinney pls read the methods as

methods: { onSubmit: function () { this.content = window.codemirror2.getValue(); }

Await your wisdom :)

Please or to participate in this conversation.