DEV Community

Cover image for Start writing Vue3 now
Daniel P πŸ‡¨πŸ‡¦
Daniel P πŸ‡¨πŸ‡¦

Posted on

Start writing Vue3 now

#vue #vue3 #javascript

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>
Enter fullscreen mode Exit fullscreen mode 
const app = Vue.createApp({
  template: `
    <h1>App</h1>
    <my-component></my-component>
  `
})

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

app.mount('#app')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
const app = Vue.createApp({
  template: document.getElementById("appTemplate").innerHTML
})

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

app.mount('#app')
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
yellow1912 profile image
yellow1912 •

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.

Collapse
 
dasdaniel profile image
Daniel P πŸ‡¨πŸ‡¦ •

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/

<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-v2-component name="Pacho"></my-v2-component>
  <my-v3-component name="El Navigante"></my-v3-component>
</template>

<template id="componentTemplate">
  A {{type}} component
  <h3>
    {{greeting}}
  </h3>
</template>

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

app.component('my-v2-component', {
  template: document.getElementById("componentTemplate").innerHTML,
  props: {
    name: { default: ''}
  },
  data(){
    return {
        type: 'class-based'
    }
  },
  computed: {
    greeting() {
      return `Salutations ${this.name}`
    }
  }
})

app.component('my-v3-component', {
  template: document.getElementById("componentTemplate").innerHTML,
  props: {
    name: { default: ''}
  },
  setup() {
    const type = Vue.ref('Composition-API')
    const greeting = Vue.computed(() =>{
      return `Salutations ${this.name}`
    })
    return {
        type,
        greeting
    }
  }
})

app.mount('#app')
Collapse
 
yellow1912 profile image
yellow1912 •

Exactly what I mean, and thank you very much for the sample code.

Read next

sharathchandark profile image

How to Build a QR Code Generator with API Using HTML, CSS, and JavaScript

sharathchandark -

fabbuilder profile image

React + Vite: The ultimate guide to static application deployment

FAB Builder | Code Generation -

rawas_aditya profile image

Understanding the Barrel Pattern in JavaScript/TypeScript

Aditya Rawas -

abhay_yt_52a8e72b213be229 profile image

Unlocking the Power of Web Components and Custom Elements for Reusable UI Design

Abhay Singh Kathayat -