🙌

同じページにVue2とVue3のコンポーネントを描画する

2021/01/31に公開

Vue.js

tech

Vue 2.xとVue 3を共存させようと思ったけどダメだった話 - SMARTCAMP Engineer Blog を読んでてどう失敗するのか分からなかったのでやってみた。

npmモジュールのインストールの仕方を真似する

package.json

  "dependencies": {
    "vue": "^2.6.12",
    "vue3": "npm:vue@^3.0.0"
  },

こういうHTMLを書いて並べてみる

index.html

<html>
<head>
    <script src="dist/main.js"></script>
</head>
<body>
    <div id="vue3"></div>
    <div id="vue2"></div>
</body>
</html>

webpackの設定をする

webpack.config.js

module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.dev.js',
      'vue3$': 'vue3/dist/vue.esm-browser.js',
    }
  }
}

JSを書く

main.js

import Vue2 from 'vue'
import * as Vue3 from 'vue3'

window.onload = () => {
  const App2 = Vue2.extend({
    name: 'App2',
    data() {
      return {message: 'Vue 2!'}
    },
    template: `<p>Hello {{message}}</p>`,
    created() {
      console.log(`created v2`)
    }
  })
  const app2 = new Vue2({
    components: {App2},
    template: `<App2 />`,
  })
  app2.$mount('#vue2')

  const App3 = {
    data() {
      return {message: 'Vue 3!'}
    },
    template: `<p>Hello {{message}}</p>`,
    created() {
      console.log(`created v3`)
    }
  }
  Vue3.createApp(App3).mount('#vue3')
}

サーバー起動

npx webpack --mode development -w
npx http-server -d dist/

見る

できた(……のか?)

追記

vue-loader を導入してSFCとしてコンポーネントを取り扱おうとしたら描画できなかったので、この部分が解決できていない

追記

Discussion