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
Top comments (3)
Can we mix code with view or we have to choose between old and new style? If we can mix code migration would be much easier and can be done step by step.
Not sure I understand the question, but if you mean whether the Composition API (using setup function) that's available in Vue3 is mandatory, or precludes one from using class-based component definition (Γ la Vue2). The answer is that you can mix them. Here is an example that has two components (using same template)
jsfiddle.net/dapo/9hunLqgk/
Exactly what I mean, and thank you very much for the sample code.