Vue CDN Dynamic Component

Summary

The Vue JS library using CDN links showing dynamic components - home, about and contact page with routing.

Tech and Tools

• JavaScript
• CSS
• HTML
• JS Fiddle
• Vue JS
• CDN

CDN

Link to the Vue JS library. (Note: I have also linked to Bootstrap for some base styles.)

<!-- Vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

HTML

<div class="container-sm">
  <h1>Vue Dynamic Components</h1>

  <hr />

  <div id="app">
    <btn label="Home" type="danger" @click="setHome"></btn>
    <btn label="About" type="success" @click="setAbout"></btn>
    <btn label="Contact" type="primary" @click="setContact"></btn>

    <keep-alive>
      <component v-bind:is="componentDC" />
    </keep-alive>
  </div>
</div>

Script

const App = Vue.createApp({
  data() {
    return {
      componentDC: 'home',
    };
  },
  methods: {
    setHome() {
      this.componentDC = 'home';
    },
    setAbout() {
      this.componentDC = 'about';
    },
    setContact() {
      this.componentDC = 'contact';
    },
  },
});

App.component('about', {
  template: `
            <h2 class="mt-4">About Us</h2>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur a purus nisi. Morbi ac rhoncus eros. Suspendisse porta in libero vel vulputate. Nam id pretium massa. Sed tempus ligula in scelerisque sodales. Vestibulum eu massa vitae neque pharetra posuere eget scelerisque diam. Duis quis metus urna. Maecenas vel sem in nulla sollicitudin blandit vitae mattis elit. Nam sem est, dignissim id arcu eget, porttitor viverra lorem. Nulla quis lacus sit amet diam consectetur rhoncus. Vestibulum placerat suscipit diam, at sodales odio blandit id. Mauris ultrices eget leo vitae dignissim. Proin dignissim risus a semper gravida. Pellentesque lectus neque, ultricies et nisl ac, hendrerit rutrum magna.</p>
            <p>Sed consectetur auctor nisl, at suscipit arcu sollicitudin suscipit. Mauris nec vehicula ligula. Quisque eget mi sed justo tincidunt hendrerit. Sed id leo libero. Nunc tempus pretium congue. Morbi at mauris mi. Cras porta, mi quis dignissim egestas, quam ex iaculis elit, quis interdum lectus urna eu lectus. Praesent ultricies orci posuere mattis vehicula. Sed lorem velit, faucibus et nisi et, viverra mollis elit. Aenean ligula turpis, tristique a consectetur at, laoreet et turpis.</p>
            <h6>Example heading <span class="badge bg-secondary">New</span></h6>
            <p class="lead">
              This is a lead paragraph. It stands out from regular paragraphs.
            </p>
            <figure>
              <blockquote class="blockquote">
                <p>A well-known quote, contained in a blockquote element.</p>
              </blockquote>
              <figcaption class="blockquote-footer">
                Someone famous in <cite title="Source Title">Source Title</cite>
              </figcaption>
            </figure>
            `,
});

App.component('home', {
  template: `
            <h2 class="mt-4">Home</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet lorem sagittis, porta quam a, scelerisque turpis. Donec id ex a erat pretium porta mollis in felis. Suspendisse mauris elit, feugiat at dapibus non, fringilla in ante. Pellentesque posuere faucibus urna sed efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ornare vel diam sed tristique. Cras dui ligula, tempus varius convallis vel, pellentesque sed risus. Suspendisse potenti. Integer odio enim, tempus et sem a, bibendum accumsan justo. Praesent vel fringilla erat. Integer eget ultricies purus. Etiam sit amet velit at purus efficitur porta ac at turpis. Quisque vulputate magna mi.</p>
            <div class="alert alert-primary" role="alert">
            A simple primary alert—check it out!
            </div>
            `,
});

App.component('contact', {
  template: `
            <h2 class="mt-4">Contact</h2>
            <form>
                <input type="text" placeholder="Name" class="form-control mb-2">
                <input type="text" placeholder="Email" class="form-control mb-2">
                <input type="password" placeholder="Password" class="form-control mb-2">
                <button class="btn btn-warning disabled">Disabled Button</button>
            </form>
            `,
});

App.component('btn', {
  props: ['label', 'type'],
  template: `
            <button :class="['btn', 'btn-' + (type || 'secondary'), 'me-2']">
            {{label}}
            </button>
            `,
});

App.mount('#app');

Demo

Open demo on JS Fiddle.

Link to Demo