mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-24 22:55:13 +00:00
40 lines
817 B
Vue
40 lines
817 B
Vue
<script setup lang="ts">
|
|
const islandProps = ref({
|
|
bool: true,
|
|
number: 100,
|
|
str: 'helo world',
|
|
obj: { json: 'works' }
|
|
})
|
|
|
|
const routeIslandVisible = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
Pure island component:
|
|
<div class="box">
|
|
<NuxtIsland name="PureComponent" :props="islandProps" />
|
|
<NuxtIsland name="PureComponent" :props="islandProps" />
|
|
</div>
|
|
<button @click="islandProps.number++">
|
|
Increase
|
|
</button>
|
|
<hr>
|
|
Route island component:
|
|
<div v-if="routeIslandVisible" class="box">
|
|
<NuxtIsland name="RouteComponent" :context="{ url: '/test' }" />
|
|
</div>
|
|
<button v-else @click="routeIslandVisible = true">
|
|
Show
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.box {
|
|
border: 1px solid black;
|
|
margin: 3px;
|
|
display: flex;
|
|
}
|
|
</style>
|