How to load external html file in a template in VueJs

Question

I\'m new to vue js. I\'m just creating a simple project where I just include vuejs through CDN. not using node/npm or cli.

I keep all my html markup in single html

Answer 1

Actually you can. This is kinda easy. Depends on your needs and situation. However, this code is NOT technically correct, however it will explain to you how it might work, gives you massive freedom and makes your original vue instance smaller.

To make this work, you will need vue router (cdn is ok) and in this case axios or fetch (if you dont care about supporting older browsers).

The only downfall in my opinion is that in content files you will need to add additional call parameter $parent . This will force vue to work.

index

  {{ route.name }}

  

     
  



  
  
  

  

hello.html content

Button

page-one.html content

   {{ num }}

page-two.html content

// what ever you like

router explanation

To make this work perfectly, you will need to find a correct way to configure your htaccess to render everything if current page after first view is not index. Everything else should work fine.

As you can see, if it is index, it will load hello content file.