2021-04-23 19:52:32 +00:00
|
|
|
<template>
|
2021-10-02 20:30:20 +00:00
|
|
|
<div>
|
2022-02-14 10:46:27 +00:00
|
|
|
<Head>
|
|
|
|
|
<Title>Basic fixture</Title>
|
|
|
|
|
</Head>
|
2024-11-19 15:24:38 +00:00
|
|
|
<NuxtLoadingIndicator :throttle="0" />
|
2022-02-18 18:14:57 +00:00
|
|
|
<h1>Hello Nuxt 3!</h1>
|
2023-04-07 11:36:45 +00:00
|
|
|
<div>RuntimeConfig | testConfig: {{ config.public.testConfig }}</div>
|
2022-03-08 18:03:21 +00:00
|
|
|
<div>Composable | foo: {{ foo }}</div>
|
|
|
|
|
<div>Composable | bar: {{ bar }}</div>
|
2023-03-01 12:24:46 +00:00
|
|
|
<div>Composable | template: {{ templateAutoImport }}</div>
|
|
|
|
|
<div>Composable | star: {{ useNestedBar() }}</div>
|
2022-12-13 09:39:14 +00:00
|
|
|
<DevOnly>Some dev-only info</DevOnly>
|
|
|
|
|
<div><DevOnly>Some dev-only info</DevOnly></div>
|
2023-05-13 22:32:31 +00:00
|
|
|
<div>
|
|
|
|
|
<DevOnly>
|
|
|
|
|
Some dev-only info
|
|
|
|
|
<template #fallback>
|
|
|
|
|
Some prod-only info
|
|
|
|
|
</template>
|
|
|
|
|
</DevOnly>
|
|
|
|
|
</div>
|
2022-05-03 09:31:58 +00:00
|
|
|
<div>Path: {{ $route.fullPath }}</div>
|
2022-04-04 08:23:11 +00:00
|
|
|
<NuxtLink to="/">
|
|
|
|
|
Link
|
|
|
|
|
</NuxtLink>
|
2023-11-09 17:01:13 +00:00
|
|
|
<NuxtLink
|
|
|
|
|
id="islands"
|
|
|
|
|
to="/islands"
|
|
|
|
|
>
|
2023-05-15 22:43:53 +00:00
|
|
|
islands
|
|
|
|
|
</NuxtLink>
|
2023-11-09 17:01:13 +00:00
|
|
|
<NuxtLink
|
|
|
|
|
id="to-immediate-remove-unmounted"
|
|
|
|
|
to="/useAsyncData/immediate-remove-unmounted"
|
|
|
|
|
>
|
2023-08-24 12:06:29 +00:00
|
|
|
Immediate remove unmounted
|
|
|
|
|
</NuxtLink>
|
2023-11-09 17:01:13 +00:00
|
|
|
<NuxtLink
|
2024-09-11 10:01:55 +00:00
|
|
|
no-prefetch
|
2023-11-09 17:01:13 +00:00
|
|
|
to="/chunk-error"
|
|
|
|
|
>
|
2023-02-16 12:43:58 +00:00
|
|
|
Chunk error
|
|
|
|
|
</NuxtLink>
|
2023-11-09 17:01:13 +00:00
|
|
|
<NuxtLink
|
|
|
|
|
id="to-client-only-components"
|
|
|
|
|
to="/client-only-components"
|
|
|
|
|
>
|
2023-10-25 00:34:22 +00:00
|
|
|
createClientOnly()
|
|
|
|
|
</NuxtLink>
|
2023-11-09 17:01:13 +00:00
|
|
|
<NuxtLink
|
|
|
|
|
id="middleware-abort-non-fatal"
|
|
|
|
|
to="/middleware-abort-non-fatal"
|
|
|
|
|
:prefetch="false"
|
|
|
|
|
>
|
2023-07-03 11:14:17 +00:00
|
|
|
Middleware abort navigation
|
|
|
|
|
</NuxtLink>
|
2023-11-09 17:01:13 +00:00
|
|
|
<NuxtLink
|
|
|
|
|
id="middleware-abort-non-fatal-error"
|
|
|
|
|
to="/middleware-abort-non-fatal?error=someerror"
|
|
|
|
|
:prefetch="false"
|
|
|
|
|
>
|
2023-07-03 11:14:17 +00:00
|
|
|
Middleware abort navigation with error
|
|
|
|
|
</NuxtLink>
|
2023-04-12 08:42:45 +00:00
|
|
|
Some value: {{ someValue }}
|
2023-03-08 12:17:22 +00:00
|
|
|
<button @click="someValue++">
|
|
|
|
|
Increment state
|
|
|
|
|
</button>
|
2023-04-11 14:17:44 +00:00
|
|
|
<NuxtLink to="/no-scripts">
|
|
|
|
|
to no script
|
|
|
|
|
</NuxtLink>
|
2023-11-27 23:02:02 +00:00
|
|
|
<NestedCounter :multiplier="2" />
|
2022-02-17 14:23:55 +00:00
|
|
|
<CustomComponent />
|
2023-08-09 11:19:00 +00:00
|
|
|
<component :is="`global${'-'.toString()}sync`" />
|
2023-01-25 10:30:59 +00:00
|
|
|
<Spin>Test</Spin>
|
2022-07-27 13:05:34 +00:00
|
|
|
<component :is="`test${'-'.toString()}global`" />
|
|
|
|
|
<component :is="`with${'-'.toString()}suffix`" />
|
2023-11-09 17:01:13 +00:00
|
|
|
<ClientWrapped
|
|
|
|
|
ref="clientRef"
|
|
|
|
|
style="color: red;"
|
|
|
|
|
class="client-only"
|
|
|
|
|
/>
|
2024-08-22 12:05:39 +00:00
|
|
|
<NuxtIsland
|
|
|
|
|
ref="island"
|
|
|
|
|
name="AsyncServerComponent"
|
|
|
|
|
:props="{ count: 34 }"
|
|
|
|
|
/>
|
2023-11-09 17:01:13 +00:00
|
|
|
<ServerOnlyComponent
|
|
|
|
|
class="server-only"
|
|
|
|
|
style="background-color: gray;"
|
|
|
|
|
/>
|
2023-09-06 19:44:59 +00:00
|
|
|
<NuxtLink to="/big-page-1">
|
|
|
|
|
to big 1
|
|
|
|
|
</NuxtLink>
|
2024-02-26 17:39:26 +00:00
|
|
|
<NuxtLink to="/server-page">
|
|
|
|
|
to server page
|
|
|
|
|
</NuxtLink>
|
2024-10-11 13:16:39 +00:00
|
|
|
<NuxtLink to="/page-load-hook">
|
|
|
|
|
to page load hook
|
|
|
|
|
</NuxtLink>
|
2024-11-17 17:58:50 +00:00
|
|
|
<NuxtLink to="/nested/xyz">
|
|
|
|
|
to page nuxt load indicator
|
|
|
|
|
</NuxtLink>
|
2021-10-02 20:30:20 +00:00
|
|
|
</div>
|
2021-04-23 19:52:32 +00:00
|
|
|
</template>
|
2021-10-02 20:30:20 +00:00
|
|
|
|
2022-11-02 10:28:41 +00:00
|
|
|
<script setup lang="ts">
|
2022-08-17 14:44:36 +00:00
|
|
|
import { setupDevtoolsPlugin } from '@vue/devtools-api'
|
2024-09-13 11:31:26 +00:00
|
|
|
import { toDisplayString } from 'vue'
|
2022-07-21 14:27:23 +00:00
|
|
|
import { useRuntimeConfig } from '#imports'
|
2023-04-07 16:02:47 +00:00
|
|
|
import { importedRE, importedValue } from '~/some-exports'
|
2024-08-22 12:05:39 +00:00
|
|
|
import type { NuxtIsland, ServerOnlyComponent } from '#build/components'
|
2022-07-21 14:27:23 +00:00
|
|
|
|
2024-09-13 11:31:26 +00:00
|
|
|
toDisplayString(useRoute())
|
|
|
|
|
|
2022-11-02 10:28:41 +00:00
|
|
|
setupDevtoolsPlugin({}, () => {}) as any
|
2024-08-22 12:05:39 +00:00
|
|
|
const island = ref<InstanceType<typeof ServerOnlyComponent>>()
|
2022-02-25 20:14:53 +00:00
|
|
|
const config = useRuntimeConfig()
|
|
|
|
|
|
2023-03-08 12:17:22 +00:00
|
|
|
const someValue = useState('val', () => 1)
|
|
|
|
|
|
2023-11-27 23:02:02 +00:00
|
|
|
const NestedCounter = resolveComponent('NestedCounter')
|
|
|
|
|
if (!NestedCounter) {
|
2023-04-19 18:17:36 +00:00
|
|
|
throw new Error('Component not found')
|
|
|
|
|
}
|
2024-08-22 12:05:39 +00:00
|
|
|
useHead({
|
|
|
|
|
meta: [
|
|
|
|
|
{
|
|
|
|
|
name: 'author',
|
|
|
|
|
content: 'Nuxt',
|
|
|
|
|
key: 'testkey',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'author',
|
|
|
|
|
content: 'Nuxt',
|
|
|
|
|
key: 'testkey',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
script: [
|
|
|
|
|
{
|
|
|
|
|
innerHTML: 'console.log("my script")',
|
|
|
|
|
key: 'my-script',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
innerHTML: 'console.log("my script")',
|
|
|
|
|
key: 'my-script',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
}, { key: 'testkey' })
|
2022-09-22 13:54:34 +00:00
|
|
|
definePageMeta({
|
2022-11-02 10:28:41 +00:00
|
|
|
alias: '/some-alias',
|
2022-11-10 10:31:01 +00:00
|
|
|
other: ref('test'),
|
|
|
|
|
imported: importedValue,
|
2024-04-05 18:08:32 +00:00
|
|
|
something: importedRE.test('an imported regex'),
|
2022-09-22 13:54:34 +00:00
|
|
|
})
|
|
|
|
|
|
2022-08-02 11:20:44 +00:00
|
|
|
// reset title template example
|
|
|
|
|
useHead({
|
2024-04-05 18:08:32 +00:00
|
|
|
titleTemplate: '',
|
2022-08-02 11:20:44 +00:00
|
|
|
})
|
|
|
|
|
|
2022-02-25 20:14:53 +00:00
|
|
|
const foo = useFoo()
|
|
|
|
|
const bar = useBar()
|
2022-08-02 15:05:02 +00:00
|
|
|
const clientRef = ref()
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
clientRef.value.exposedFunc()
|
|
|
|
|
})
|
2021-10-02 20:30:20 +00:00
|
|
|
</script>
|
