Как во vue 3 сделать только рендер компонентов, без замены рут элемента?

Question

[guruloz]

Раньше по дефолту вью имел режим рендеринга компонентов, когда мы просто указывали:

new Vue({
    el: "#app"
})

А в 3 версии есть вариант только монтирования в дом с полной замены рутового элемента.
Vue.createApp(RootComponent).mount('#app')

Возможно ли в 3 версии сделать так же, как и было раньше, чтоб только компоненты пропарсило, не заменяя полностью содержимое?

Answer 1

[Влад Токарев]

Да, возможно:

import { createApp } from 'vue';

createApp({
  components: {
    // Список компонентов, которые могут использоваться в шаблоне 
  },
})
  .use(store)
  .mount('#app');

Единственный момент - необходимо использовать при подключении сборку, которая поддерживает парсинг шаблонов. По умолчанию используется меньшая по размеру сборка без этой возможности, а за парсинг шаблонов отвечает vue-loader.

Чтобы код выше работал можно подправить либо импорт на 'vue/dist/vue.esm-bundler.js'', либо добавить во vue.config.js секцию:

const buildConfig = {
  // Может быть что-то выше
  configureWebpack: {
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm-bundler.js',
      },
    },
  },
  // Может еще что-то
};

module.exports = buildConfig;

Comments

[guruloz]

Давно не заходил на тостер, а тут твой ответ порадовал.
Благодарю)

[alekscomauro]

Огромное спасибо!