<!DOCTYPE html>
<html lang="en">
    <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">
  <h1>This is standard HTML</h1>
  <div id="components-demo" class="components-demo">
    <h3>Here is some content generated with Vue</h3>
  <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>
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