<!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>
 <div id="enable-vue-here">
  <h1>This is standard HTML</h1>
  
  <div class="components-demo">
    <h3>Here is an input component generated with Vue:</h3>
    <editable-text></editable-text>
  </div>
  <p>This paragraph is normal HTML content. Not interactive, server-side generated.</p>
  
  <div  class="components-demo">
    <h3>Here is a button with counter generated with Vue:</h3>
    <my-counter></my-counter>
  </div>
   
  <div class="components-demo">
    <h3>Here is an another input component generated with Vue, with a different text passed in as a property:</h3>
    <editable-text message="Edit me" custom-label="We've changed the label and the input text default value"></editable-text>
  </div>
  </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('my-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: `<button v-on:click="count++">You have clicked {{ count }} times.</button>
`
})
 

// Create a second component

Vue.component('editable-text', {
  data: function () {
    return {
      internalMessage: this.message || "Change me",
      label: this.customLabel || "Edit the text in the input field, changes will reflect here"
    }
  },
  props: {
    message: {
      type: String
    },
    customLabel: {
      type: String
    }
  },
  template: `<div><p>{{label}}: {{ internalMessage }}</p>
<input v-model="internalMessage" placeholder="" /></div>`
})

// activate Vue on the whole container

let app = new Vue({ el: '#enable-vue-here' })

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