<section class="section">
  <div id="app">
  </div>
</section>

@import url('https://unpkg.com/bulma@latest/css/bulma.css');

[v-cloak]{
  display:none;
}
View Compiled
/** @jsx h */
import {
  createApp,
  h,
  defineComponent,
  ref,
  unref
} from "https://unpkg.com/vue@3/dist/vue.runtime.esm-browser.prod.js?module";

const VueComponent = defineComponent({
  props:['message'],
  setup(props,ctx) {
    return () => <div class="subtitle">{unref(props.message)}</div>;
  },
});

const MainApp = defineComponent(function mainApp() {
  const thing = ref("Hello World");
  const refMessage = ref("I'm a component!");
  return () => (
    <div class="container">
      <h1 class="title">{thing.value}</h1>
      <VueComponent message={refMessage} />
    </div>
  );
});

const app = createApp(MainApp).mount("#app");
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/fimion/pen/jOyggxN.js