<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Including one Vue.js component in an existing HTML page</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
  <h1>This is standard HTML</h1>
  <div id="components-demo" class="components-demo">
    <h3>Here is some content generated with Vue</h3>
    <editable-text></editable-text>
  </div>
  <p>This paragraph is normal HTML content. Not interactive, server-side generated.</p>
  
  <div id="components-demo2"  class="components-demo">
    <h3>Here is some other content generated with Vue</h3>
    <my-counter></my-counter>
  </div>
</body>
</html>
body {
  font-family: 'Open Sans', sans-serif;
  color: #0c0c0c;
  background: #eeeeee;
}
.components-demo {
  border: 1px dashed lightgrey;
  padding: 10px;
}
// Create a first component <my-counter>

Vue.component('editable-text', {
  data: function () {
    return {
      message: "Change me"
    }
  },
  template: `<div><p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" /></div>`
})


// activate Vue on the <div> that contains the component

new Vue({ el: '#components-demo' })

// Create a second component
Vue.component('my-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: `<button v-on:click="count++">You have clicked {{ count }} times.</button>
`
})

// activate a Vue instance on the <div> that contains the component

new Vue({ el: '#components-demo2' })

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js