Utilizar un CDN en Vue 3

En Vue 2 para utilizar su CDN en un proyecto básico lo teníamos muy fácil, con añadir la hoja de script a nuestro archivo HTML ya teníamos suficiente y podíamos empezar a utilizar Vue. lo que sea y todo funcionaba.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CDN en Vue 2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        
    </div>
    
    <script>
        new Vue({
          el: '#app',
        })
    </script>
</body>
</html>

El uso de un CDN en Vue 3 ha cambiado y ahora debemos trabajar de otra forma, el siguiente ejemplo te servirá para empezar a trabajar con Vue 3 a través de un CDN.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CDN en Vue 3</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        
    </div>

    <script>
        const {createApp} = Vue;
        const application = createApp({});
        application.mount('#app')
    </script>
</body>
</html>

A partir de tener definida la constante application y antes de hacer el mount, podremos utilizar .component, .filter y todo lo que necesitemos cómo lo hacíamos en Vue 2.