🙄

vue3でvue-monacoを動かしてみる

2020/09/21に公開

Vue.js

tech

vue-monaco

monacoをvueで動かしてくれるライブラリ

vue3対応

以下の部分について、vue-monaco自体に修正が必要だったので、cloneしてここで修正を行った。なんでvueなのに.jsファイルだけなんだろうと思っていたけど、poiというのがあるみたい...

// Vue 3 Render Function Example
import { h } from 'vue'

export default {
  render() {
    return h('div')
  }
}

実行手順

パッケージの追加をして

yarn add kurata321/monaco-vue3.git monaco-editor-webpack-plugin

vue.config.jsにwebpackの設定を追記をする。

const MonocoEditorPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      // (from: https://github.com/egoist/vue-monaco)
      new MonocoEditorPlugin({
        // https://github.com/Microsoft/monaco-editor-webpack-plugin#options
        // Include a subset of languages support
        // Some language extensions like typescript are so huge that may impact build performance
        // e.g. Build full languages support with webpack 4.0 takes over 80 seconds
        // Languages are loaded on demand at runtime
        languages: ['css']
      })
    ]
  }
}

あとは適当にvueファイルで読み込めば、下画像のようなvscode的なエディターが動いてくれる。