Code · 1 file
Sample Vue File
Vue single-file components combine template, script and scoped style in one .vue file. The Vue sample is a small program — a customer record, a VIP check and a formatted total — that is the same in every language we offer, so you can compare them side by side.
Vue · 611 B
Sample Vue single-file component file
An idiomatic Vue single-file component example: a customer record type, a VIP check, a total and a formatted loop — the same program in every language we offer.
CC0 · free for any use · Verified by an independent tool · Report a problem
<!-- Sample Vue 3 single-file component — samplefiles.com -->
<script setup>
import { computed, ref } from 'vue';
const props = defineProps({ customers: { type: Array, required: true } });
const vipOnly = ref(false);
const shown = computed(() => (vipOnly.value ? props.customers.filter((c) => c.balance >= 10000) : props.customers));
</script>
<template>
<label><input v-model="vipOnly" type="checkbox" /> VIP only</label>
<ul>
<li v-for="c in shown" :key="c.id">{{ c.name }}: {{ c.balance.toFixed(2) }}</li>
</ul>
</template>
<style scoped>
li {
font-variant-numeric: tabular-nums;
}
</style>File details
Download from the command line
curl -L -o Sample.vue https://files.samplefiles.com/code/vue/Sample.vuewget https://files.samplefiles.com/code/vue/Sample.vuehttps://files.samplefiles.com/code/vue/Sample.vueprintf '%s %s\n' 076cda64dce384a969783656897b6bd01151fa38470ecd9978894f826991f884 Sample.vue | shasum -a 256 -cOr check the download in your browser with the checksum calculator.