CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuetify.js
Simon Thiel
Simon Thiel

Reputation: 3285

Integrate existing static html website into existing vue js web app

I created a contact form with vue and vuetify as a new vue project. Now I would like to integrate it into the existing static html page. I tried to add the vue app as a vue instance which didn't seem to be the right approach. Would it be easier to existing html & css code into the new light weight vue project setup?

Can you recommend a simple github project as an example which includes vue just as an instance into an existing website?

Upvotes: 1

Views: 4085

Answers (1)

tao
tao

Reputation: 90013

Vue's can be praised for many reasons but one of the most outstanding ones would be its scalability. You can use Vue simply for rendering a button or to create large scale applications.

All you need is to load vue.js and target the app element, using its id. Vue doesn't care what's outside that element (but can access the rest of the page, if required). You can even have multiple Vue instances on the same page.

Example: 

<div id="contactForm">
  <div v-text="limits" :style="appStyle"></div>
</div>
<p>You can have any html outside your vue app, it will display... normally. 
</p>
<p>You can place your vue instance anywhere you want, as long as the element you instantiate it on exists in DOM when you try to instantiate it.
<p>And <code>vue.js</code> has to be loaded before you call the constructor. That's about it.</p>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#contactForm',
    computed: {
      limits(){ return 'There are no limits.' },
      appStyle() { return {
          color: 'red',
          border: '1px solid #ddd'
        }
      } 
    }
  });
</script>

Upvotes: 3

Related Questions