[Vuejs]-How to include a vuejs app build with npm and webpack in an existing website with a simple 'a' tag?

by

2👍

I’m making the assumption that the rest of your site is not using Vue and that you want to make it so that when you click on ‘Vue App’ in the nav you want the contents of that page to be a Vue app.

Yes you can do this, just include your script on the page you want to make use vue. You should be able to do this by following https://v2.vuejs.org/v2/guide/index.html.

File VueApp.html

<div id="myApp">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>
<script src="app.min.js"></script> // Your compiled file from webpack

myApp.js (include this file in webpack)

var app2 = new Vue({
    el: '#myApp', 
    data: {
     message: 'You loaded this page on ' + new Date().toLocaleString()
    }
})

Vue doesn’t really care where it’s implemented, when it comes down to it it’s just javascript. Where you will run into trouble is when you try and implement it several times on the same page.

👤Tom Headifen

Leave a comment