How do I split components into smaller files while using Vuejs from CDN and running Codekit?

Question

I should preface this that this is not a serious app, but instead a framework for quick prototyping so performance or compatibility isn't an issue.

I'm currently running Codekit to get my Scss and Build folder. And I've included VueJS from a CDN in the header. I also have a components.js file which contains the following:

const app = Vue.createApp({});

app.component("list-heading", {
  props: {
    title: {
      type: String,
      default: null,
    },
    extra: {
      type: String,
      default: null,
    },
  },
  template: `

<div class="list-heading">
    <h4>{{title}}</h4>
    <div v-if="extra">{{extra}}</div>
</div>

`,
});

app.mount("#app");

And this works exactly how I want it. Except, I'd like to just for the sake of being organised split up each component in small files and import them, but can't manage to sort it out. Like this:

const app = Vue.createApp({});

import './list-heading.js';

app.mount("#app");

I know the last code isn't functional, it's just for illustration purposes. Anyone know how to do this?

Answer 1

list-heading.js:

export default {
  props: {
    title: {
      type: String,
      default: null,
    },
    extra: {
      type: String,
      default: null,
    },
  },
  template: `
<div class="list-heading">
    <h4>{{title}}</h4>
    <div v-if="extra">{{extra}}</div>
</div>
`
}

app.js:

import ListHeading from './list-heading.js';

const app = Vue.createApp({});
app.component("list-heading", ListHeading);

app.mount("#app");

---

...or:

list-heading.js:

import Vue from 'vue';
export default Vue.extend({
  //props, template, etc...
})

app.js:

import ListHeading from './list-heading.js';

const app = Vue.createApp({
  components: { ListHeading }
});

app.mount("#app");