This is about how to create a setup using online tools such as jsfiddle to start coding in Vue3 right away.

Vue v3 finally has a public release, which might get a lot of people wanting to try it out. The issue I find with these frameworks is that there is a bit of a setup to go through to get going, so I like when there's a way to just start using it with minimal setup.

In this case, I've been using jsfiddle to skip the setup of local environment for smaller tests or examples. You can use this in most REPL-style coding environments lie jsbin and codepen. Of course, if you want to setup a full-fledged project follow the official docs.

Here is a quick setup

add js resource (either via script tag or settings)
https://unpkg.com/vue@next/dist/vue.global.js

this should always get the latest version (3.0.0 at the time of writing), however the downside is that breaking changes may be introduced, so locking it in at a working version for posterity may be worthwhile for you.

Using vue.global.js (or the prod version vue.global.prod.js) will make the Vue object available as a global variable, and is IMHO the easiest way to do this

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app"></div>

const app = Vue.createApp({
  template: `
    <h1>App</h1>
    <my-component></my-component>
  `
})

app.component('my-component', {
  template: `A component`
})

app.mount('#app')

This is pretty straight forward, and a common way of setting these up without ability to include Single File Components. And while you can put the template content of #app into the HTML DOM element, it is going to render before the html is loaded, and is not usable for components, so what I do is use the template tag and document.getElementById to get the content

And voila:

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app"></div>

<template id="appTemplate">
  <h1>H1: App</h1>
  <my-component></my-component>
</template>

<template id="componentTemplate">
  A component
</template>

const app = Vue.createApp({
  template: document.getElementById("appTemplate").innerHTML
})

app.component('my-component', {
  template: document.getElementById("componentTemplate").innerHTML
})

app.mount('#app')

Note that Vue 3 doesn't require you to have a single top level component, which allows you me to skip the extra div to wrap the h1 and component tags in the app template.

link https://codepen.io/scorch/pen/yLOZyxg

Vue 3 docs: v3.vuejs.org

Image Credit: Paweł Czerwiński