Nuxt/test/fixtures/basic/pages/index.vue

60 lines
1.6 KiB
Vue
Raw Permalink Normal View History

<template>
<div>
<Head>
<Title>Basic fixture</Title>
</Head>
<h1>Hello Nuxt 3!</h1>
2022-03-08 18:03:21 +00:00
<div>RuntimeConfig | testConfig: {{ config.testConfig }}</div>
<div>Composable | foo: {{ foo }}</div>
<div>Composable | bar: {{ bar }}</div>
<div>Composable | template: {{ templateAutoImport }}</div>
<div>Composable | star: {{ useNestedBar() }}</div>
<DevOnly>Some dev-only info</DevOnly>
<div><DevOnly>Some dev-only info</DevOnly></div>
<div>Path: {{ $route.fullPath }}</div>
<NuxtLink to="/">
Link
</NuxtLink>
<NuxtLink to="/chunk-error" :prefetch="false">
Chunk error
</NuxtLink>
2023-01-22 16:46:45 +00:00
<NestedSugarCounter :multiplier="2" />
<CustomComponent />
<Spin>Test</Spin>
<component :is="`test${'-'.toString()}global`" />
<component :is="`with${'-'.toString()}suffix`" />
<ClientWrapped ref="clientRef" style="color: red;" class="client-only" />
<ServerOnlyComponent class="server-only" style="background-color: gray;" />
</div>
</template>
<script setup lang="ts">
import { setupDevtoolsPlugin } from '@vue/devtools-api'
import { useRuntimeConfig } from '#imports'
import { importedValue, importedRE } from '~/some-exports'
setupDevtoolsPlugin({}, () => {}) as any
2022-02-25 20:14:53 +00:00
const config = useRuntimeConfig()
definePageMeta({
alias: '/some-alias',
other: ref('test'),
imported: importedValue,
something: importedRE.test('an imported regex')
})
// reset title template example
useHead({
titleTemplate: ''
})
2022-02-25 20:14:53 +00:00
const foo = useFoo()
const bar = useBar()
const clientRef = ref()
onMounted(() => {
clientRef.value.exposedFunc()
})
</script>