I found detailed instructions here on how to create a Stack Snippet for React, but I have been unable to figure out how to do so for a Vue.js component.
How do I create a runnable Stack Snippet of a Vue.js component?
I found detailed instructions here on how to create a Stack Snippet for React, but I have been unable to figure out how to do so for a Vue.js component.
How do I create a runnable Stack Snippet of a Vue.js component?
Below is a (slightly updated) direct copy from something I initially wrote into the end of the vue.js tag wiki; I figure it's a good starting point for creating a more comprehensive resource.
I'm currently unfamiliar with Vue 3, so I'm unsure about whether or how much this guidance needs to be updated to be compatible.
All are encouraged to edit this in any way to improve its usefulness as a resource!
It is often useful to share runnable snippets of code in questions regarding Vue components. Since Stack Snippets can't natively run Vue single file components (.vue
files), it's necessary to do a little conversion work.
To create a Stack Snippet containing Vue in a Stack Overflow post, make sure you:
<script>
tag referencing the version you need:<script src="https://unpkg.com/vue@2"></script>
)new Vue({...})
default export
with new Vue
, and don't forget the parenthesis ()
around your brackets {}
import
statements, so you should trim everything out of the snippet that's not strictly necessary to understand your question and the problem at handel
property of the new Vue instance to indicate what HTML container Vue should render in (see example below)You may also want to replace your <template>
HTML elements with some alternative (ie. <div>
) if it causes issues.
Starting with something like this:
HelloWorld.vue
<template>
<div>
<p>{{ message }}</p>
<input v-model="message">
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!'
}
}
}
</script>
Will end up with something like this:
HelloWorld.html
<html>
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<!-- Don't forget to include Vue from CDN! -->
<script src="https://unpkg.com/vue@2"></script>
<script>
new Vue({
el: '#app', //Tells Vue to render in HTML element with id "app"
data() {
return {
message: 'Hello World!'
}
}
});
</script>
</html>
You can drop this straight into the HTML section of a snippet, or split it into the HTML and JavaScript sections accordingly. Bear in mind that splitting it may make the code clearer to readers!
<html>
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<!-- Don't forget to include Vue from CDN! -->
<script src="https://unpkg.com/vue@2"></script>
<script>
new Vue({
el: '#app', //Tells Vue to render in HTML element with id "app"
data() {
return {
message: 'Hello World!'
}
}
});
</script>
</html>
Here's a Vue 3 snippet.
const App = {
name: "App",
data() {
return {
message: "hello world",
};
},
};
Vue.createApp(App).mount('#app');
<div id="app">
<p>{{message}}</p>
<input v-model="message">
</div>
<script src="https://unpkg.com/vue@3"></script>
Here's a larger example with multiple components and assorted functionality:
"use strict";
const Test = {
name: "Test",
template: document.querySelector("#test").innerHTML,
props: ["labelName"],
data() {
return {
name: "",
names: [],
};
},
methods: {
onReset() {
this.name = "";
},
submit() {
this.names.push(this.name);
this.name = "";
},
},
};
const App = {
name: "App",
template: document.querySelector("#app-template").innerHTML,
data() {
return {
message: "hello world",
user: null,
};
},
components: {
Test,
},
mounted() {
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => {
this.user = json;
});
},
computed: {
reversedMessage() {
return [...this.message].reverse().join("");
},
},
};
Vue.createApp(App).mount('#app');
<template id="app-template">
<p>{{reversedMessage}}</p>
<input v-model="message">
<pre v-if="this.user">{{JSON.stringify(user, null, 2)}}</pre>
<pre v-else>loading...</pre>
<test label-name="test label"></test>
</template>
<template id="test">
<form @submit.prevent="submit" @reset="onReset">
<div>
<label>{{labelName}}
<input v-model="name" />
</label>
</div>
<button type="submit">submit</button>
<button type="reset">reset</button>
</form>
<div>
<ul>
<li v-for="n of names">{{n}}</li>
</ul>
</div>
</template>
<div id="app"></div>
<script src="https://unpkg.com/vue@3"></script>
If you want to disable the production tip, see How do I turn off the productionTip warning in Vue 3?, or add the CSS .as-console-wrapper{display:none!important}
, assuming you don't mind hiding errors and all other logs.
To be a bit more precise than the CSS solution at the expense of uglier code, you can add the following JS to prune out only the production tip row from the console:
setTimeout(() => [...document.querySelectorAll(".as-console-row")]
.forEach(e => e.textContent.includes("build of Vue") && e.remove()
), 0);
three.js
snippet like this one inside the Vue
snippet? thanks in advance.
It can be done with an object-formatted component (with <template> tags, as opposed to a single file component).
Select a recent version of vue from the "Options" on the left pane, then...
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
data: {
message: 'World'
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h1>Hello {{ message }}</h1>
</div>