mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 16:43:55 +00:00
e6ca07bdc0
Co-authored-by: Daniel Roe <daniel@roe.dev> Co-authored-by: jhuang@hsk-partners.com <jhuang@hsk-partners.com>
46 lines
644 B
Vue
46 lines
644 B
Vue
<script lang="ts">
|
|
export default defineNuxtComponent({
|
|
name: 'ClientScript',
|
|
props: {
|
|
foo: {
|
|
type: String
|
|
}
|
|
},
|
|
setup (_p, ctx) {
|
|
const count = ref(0)
|
|
const add = () => count.value++
|
|
|
|
ctx.expose({ add })
|
|
|
|
return {
|
|
count,
|
|
add
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="client-only-css">
|
|
client only script component {{ foo }}
|
|
</div>
|
|
<button @click="add">
|
|
{{ count }}
|
|
</button>
|
|
<slot name="test" />
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
:root {
|
|
--client-only: "client-only";
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.client-only-css {
|
|
color: rgb(50, 50, 50);
|
|
}
|
|
</style>
|