Having issues with the dark theme (vs-dark). Empty and small files are loaded with the dark them, large files loaded with the default white theme.
This is <TheEditor> component. I removed lots of code from the original component for demonstration purpose. Note that it does not uses v-model, instead it uses value and @change to interact with VueX store:
<template>
<div class="the-editor">
<MonacoEditor
class="editor"
:theme="codeEditor.theme"
:language="codeEditor.language"
:options="codeEditor.options"
:value="codeEditor.content"
@change="updateFile"
/>
</div>
</template>
<script>
import MonacoEditor from 'vue-monaco';
export default {
name: 'TheEditor',
components: { MonacoEditor },
computed: {
code() {
return this.$store.getters.code;
},
isEditMode() {
return this.$store.getters.isEditMode;
},
codeEditor() {
return {
theme: 'vs-dark',
language: this.code.language,
content: this.code.content || '',
options: {
automaticLayout: true,
readOnly: !this.isEditMode,
},
};
},
},
methods: {
updateFile(newVal) {
const newFile = { ...this.code, content: newVal || '' };
this.$store.commit({ type: 'updateFile', file: newFile });
},
},
};
</script>
<style lang="scss">
.the-editor{
.editor {
width: 100%;
height: 100%;
}
}
</style>With the following vue.config.js file:
module.exports = {
productionSourceMap: false,
lintOnSave: false,
configureWebpack: {
node: {
process: false, // Fix copy & paste bug
module: 'empty', // Fix build warning
fs: 'empty', // Fix build warning
},
plugins: [
new MonocoEditorPlugin(),
],
},
};In any case, the dark theme CSS is not always loaded. Do you see why it happens?
egoist / vue-monaco
MonacoEditor component for Vue.js
694
Contributors get 70% of received funds after fees
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too