🙄

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

2020/09/20に公開約2,000字

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的なエディターが動いてくれる。

参考・引用

https://poi.js.org/guide/getting-started.html
https://qiita.com/pure-adachi/items/ba82b03dba3ebabc6312
https://v3.vuejs.org/guide/migration/v-model.html
https://v3.vuejs.org/guide/migration/render-function-api.html
https://scrapbox.io/nwtgck/Vue+TypeScriptでMicrosoftのMonaco_Editorを使う
https://blog.mamansoft.net/2018/07/16/nuxtjs-typescript-monacoeditor/

Discussion

ログインするとコメントできます