2022-03-17 22:17:59 +00:00
|
|
|
<script setup lang="ts">
|
|
|
|
import Label from './label.vue'
|
|
|
|
|
|
|
|
let count = $ref(0)
|
|
|
|
|
|
|
|
function inc () {
|
|
|
|
count++
|
|
|
|
}
|
|
|
|
function dec () {
|
|
|
|
count--
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2022-03-23 08:44:36 +00:00
|
|
|
<NuxtExampleLayout show-tips example="with-reactivity-transform">
|
2022-03-17 22:17:59 +00:00
|
|
|
<div>
|
|
|
|
<Label :count="count" />
|
|
|
|
<div class="flex gap-1 justify-center">
|
|
|
|
<NButton @click="inc()">
|
|
|
|
Inc
|
|
|
|
</NButton>
|
|
|
|
<NButton @click="dec()">
|
|
|
|
Dec
|
|
|
|
</NButton>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<template #tips>
|
|
|
|
<div class="flex-auto">
|
2022-03-23 08:44:36 +00:00
|
|
|
<p>
|
|
|
|
This example demonstrates the support of Reactivity transforms in Nuxt 3.
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
Read the documentation about
|
|
|
|
<a href="https://vuejs.org/guide/extras/reactivity-transform.html" target="_blank">
|
|
|
|
Reactivity Transform.
|
|
|
|
</a>
|
|
|
|
</p>
|
2022-03-17 22:17:59 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</NuxtExampleLayout>
|
|
|
|
</template>
|