A code editor in Vue

components_editor.js

let ace = require('brace');
require('brace/mode/javascript');
require('brace/mode/scss');
require('brace/mode/html');
require('brace/theme/chrome');
require('brace/theme/twilight');

export default {
    template: '<div id="ace-editor"></div>',

    data() {
        return {
            editor: null
        }
    },

    ready() {
        var editor = ace.edit('ace-editor')
        editor.getSession().setMode('ace/mode/scss')
        editor.setTheme('ace/theme/chrome')
        editor.setOption("highlightActiveLine", false)

        this.editor = editor
    },

    methods: {
        loadFile(name, type) {
            this.$http.get('/a;editor/files/retrieve.json', {params: {name: name, type: type}})
                .then(response => {
                    console.log(response.data)
                    this.editor.getSession().setMode('ace/mode/'+type)
                    this.editor.getSession().setValue(response.data.fileContent)
                })
        }
    },

    events: {
        'switch-file': function(file) {
            this.loadFile(file.name, file.type)
        }
    }
}

components_filetree.js

export default {
    data() {
        return {
            types: [
                {
                    show: true,
                    class: 'css',
                    name: 'CSS',
                    key: 'scss',
                    files: [
                        'style'
                    ],
                    children: []
                },
                {
                    show: true,
                    class: 'js',
                    name: 'JavaScript',
                    key: 'js',
                    files: [
                        'app'
                    ],
                    children: []
                },
                {
                    show: false,
                    class: 'blocks',
                    name: 'Blocks',
                    key: 'blocks',
                    files: [],
                    children: []
                },
                {
                    show: false,
                    class: 'templates',
                    name: 'Templates',
                    key: 'templates',
                    files: [],
                    children: [
                        {
                            show: false,
                            class: 'partials',
                            name: 'Partials',
                            key: 'partials',
                            files: []
                        }
                    ]
                }
            ]
        }
    },

    methods: {
        switchFile(name, type) {
            this.$dispatch('switch-file', {name: name, type: type})
        }
    }
}

editor.js

'use strict'

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

import filetree from './components/filetree'
import editor from './components/editor'

Vue.config.delimiters = ['[[', ']]']

let app = new Vue({
    el: '#code-editor',
    components: {
        filetree: filetree,
        editor: editor
    },

    events: {
        'switch-file': function(file) {
            this.$broadcast('switch-file', file)
        }
    }
})