Vuejs 3: Prevent compiling plain HTML-Tags

Question

I'm trying to avoid Vue from compiling plain HTML-Tags inside root element. Here is a code example:

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
  <script type="application/javascript" src="my_component.js">
  <script>const app = Vue.createApp({});</script>
  <div id="app">
    <my-component></my-component>
    ...
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    ...
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    ...
  </div>
  <script>app.mount("#app");</script>
</body>

Vue 3 compiles all of the elements (plain HTML-Elements to) within the root elements to search for Vue components, but this can be a load problem if the page is very large and doesn't have that many Vue components.

I was trying to do something like this:

<script>app.config.isCustomElement = tag => tag.startsWith('div') || tag.startsWith('span');</script>

but that doesn't ignors plain HTML-Tags as div and span.

Another option that i tired was:

  ...
  <div id="app">
    <my-component></my-component>
    ...
    <div v-pre>
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     ...
     <span>1</span>
     <span>2</span>
     <span>3</span>
     <span>4</span>
     ...
   </div>
  </div>
  ...

This was also not so successful.

Can someone help me with this problem?

Ferry Kranenburg · Accepted Answer · 2021-08-02 19:53:50Z

1

I had the same requirement a while ago. I first added an extra attribute on every Vue component like this

<my-component [load-vue]></my-component>

And then I initialized every component with the following script on the page. I'm not sure this works for you but it might give you an idea how to do it.

  document.querySelectorAll("[load-vue]").forEach(el => {
    new Vue({
      el: el
    });
  });

Warning: This works in Vue 2, not sure in Vue 3

answered Aug 2, 2021 at 19:53

Ferry Kranenburg

2,6351 gold badge19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cananau Cristian Over a year ago

Thank you for your answer, I wasn't looking for that, but I understood your idea. It works with vue 2 but not with vue 3. You have to create a new instance for each component and there are inconsistencies. Vue Store does not work if you want to communicate between components but in different apps. But this answer can help someone else that's why i gave it a like.

Collectives™ on Stack Overflow

Vuejs 3: Prevent compiling plain HTML-Tags

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related