mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
docs: remove examples/ from repository (#21538)
Co-authored-by: Sébastien Chopin <seb@nuxt.com>
This commit is contained in:
Daniel Roe
GitHub
parent
0e575ad5ab
commit
444d4e1ca7
@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# Hello World
|
|
||||||
|
|
||||||
A minimal Nuxt 3 application only requires the `app.vue` and `nuxt.config.js` files.
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/getting-started/introduction"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/essentials/hello-world" file="app.vue"}
|
|
||||||
::
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# `app.config`
|
|
||||||
|
|
||||||
> Nuxt 3 provides an app.config config file to expose reactive configuration within your application with the ability to update it at runtime within lifecycle or using a nuxt plugin and editing it with HMR (hot-module-replacement).
|
|
||||||
|
|
||||||
This example shows how to use `app.config` feature.
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/guide/directory-structure/app-config"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/app-config" file="app.vue"}
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# Error Handling
|
|
||||||
|
|
||||||
This example shows how to handle errors in different contexts: pages, plugins, components and middleware.
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/getting-started/error-handling"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/app/error-handling" file="app.vue"}
|
|
||||||
::
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# Plugins
|
|
||||||
|
|
||||||
This example shows how to use the plugins/ directory to auto-register plugins.
|
|
||||||
|
|
||||||
:ReadMore{link="/docs/guide/directory-structure/plugins"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/app/plugins" file="app.vue"}
|
|
||||||
::
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# Teleport
|
|
||||||
|
|
||||||
This example shows how to use the <Teleport> with client-side and server-side rendering.
|
|
||||||
|
|
||||||
Vue 3 provides the [`<Teleport>` component](https://vuejs.org/guide/built-ins/teleport.html) which allows content to be rendered elsewhere in the DOM, outside of the Vue application.
|
|
||||||
|
|
||||||
This example shows how to use the `<Teleport>` with client-side and server-side rendering.
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/api/components/teleports"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/app/teleport" file="app.vue"}
|
|
||||||
::
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# Components
|
|
||||||
|
|
||||||
Components in the `components/` directory are auto-imported and can be used directly in your templates. You can configure other directories to support components auto-imports.
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/guide/directory-structure/components"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/auto-imports/components" file="app.vue"}
|
|
||||||
::
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# Composables
|
|
||||||
|
|
||||||
This example shows how to use the composables/ directory to auto-import composables.
|
|
||||||
|
|
||||||
If the composable file provides a default export, the name of the composable will be mapped to the name of the file. Named exports can be used as-is.
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/guide/directory-structure/composables"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/auto-imports/composables" file="app.vue"}
|
|
||||||
::
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# useAsyncData
|
|
||||||
|
|
||||||
This example shows how to use useAsyncData to fetch data from an API endpoint.
|
|
||||||
|
|
||||||
::alert{type=info icon=💡}
|
|
||||||
Nuxt will automatically read files in the `~/server/api` directory to create API endpoints.
|
|
||||||
::
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/api/composables/use-async-data"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/getting-started/data-fetching"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/composables/use-async-data" file="app.vue"}
|
|
||||||
::
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# useCookie
|
|
||||||
|
|
||||||
This example shows how to use the useCookie API to persist small amounts of data that both client and server can use.
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/api/composables/use-cookie"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/composables/use-cookie" file="app.vue"}
|
|
||||||
::
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# useFetch
|
|
||||||
|
|
||||||
This example shows how to use useFetch to fetch data from an API endpoint.
|
|
||||||
|
|
||||||
::alert{type=info icon=💡}
|
|
||||||
Nuxt will automatically read files in the `~/server/api` directory to create API endpoints.
|
|
||||||
::
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/api/composables/use-fetch"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/getting-started/data-fetching"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/composables/use-fetch" file="app.vue"}
|
|
||||||
::
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# useHead
|
|
||||||
|
|
||||||
This example shows how to use useHead and Nuxt built-in components to bind meta data to the head of the page.
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/api/composables/use-head"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/getting-started/seo-meta"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/composables/use-head" file="app.vue"}
|
|
||||||
::
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# useState
|
|
||||||
|
|
||||||
This example showcase the `useState` composable, an SSR-friendly ref replacement.
|
|
||||||
|
|
||||||
Its value will be preserved after server-side rendering and shared across all components using a unique key.
|
|
||||||
|
|
||||||
::alert{type=info icon=👉}
|
|
||||||
Learn more about [useState](/docs/api/composables/use-state).
|
|
||||||
::
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/api/composables/use-state"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/getting-started/state-management"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/composables/use-state" file="app.vue"}
|
|
||||||
::
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# Layouts
|
|
||||||
|
|
||||||
This example shows how to define default and custom layouts.
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/guide/directory-structure/layouts"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/routing/layouts" file="pages/index.vue"}
|
|
||||||
::
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# Middleware
|
|
||||||
|
|
||||||
This example shows how to add route middleware with the middleware/ directory or with a plugin, and how to use them globally or per page.
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/guide/directory-structure/middleware"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/routing/middleware" file="app.vue"}
|
|
||||||
::
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# `<NuxtLink>`
|
|
||||||
|
|
||||||
This example shows different ways to navigate between page with the `<NuxtLink>` component.
|
|
||||||
|
|
||||||
::alert{type=info icon=💡}
|
|
||||||
`components/MyNuxtLink.ts` defines a custom `<NuxtLink>`.
|
|
||||||
::
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/api/components/nuxt-link"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/routing/nuxt-link" file="app.vue"}
|
|
||||||
::
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# Pages
|
|
||||||
|
|
||||||
This example shows how to use the pages/ directory to create application routes.
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/guide/directory-structure/pages"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/routing/pages" file="app.vue"}
|
|
||||||
::
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# Universal Router
|
|
||||||
|
|
||||||
This example demonstrates Nuxt universal routing utilities without depending on `pages/` and `vue-router`.
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/routing/universal-router" file="app.vue"}
|
|
||||||
::
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# Server Routes
|
|
||||||
|
|
||||||
This example shows how to create server routes inside the `server/api` directory.
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/guide/directory-structure/server"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/server/routes" file="app.vue"}
|
|
||||||
::
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# Config Extends
|
|
||||||
|
|
||||||
This example shows how to use the extends key in `nuxt.config.ts`.
|
|
||||||
|
|
||||||
This example shows how to use the `extends` key in nuxt.config.ts to use the `base/` directory as a base Nuxt application, and use its components, composables or config and override them if necessary.
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/advanced/config-extends" file="nuxt.config.ts"}
|
|
||||||
::
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# JSX / TSX
|
|
||||||
|
|
||||||
This example shows how to use [jsx syntax](https://vuejs.org/guide/extras/render-function.html#jsx-tsx) with typescript in Nuxt pages and components.
|
|
||||||
|
|
||||||
::ReadMore{link="https://vuejs.org/guide/extras/render-function.html#jsx-tsx"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/advanced/jsx" file="nuxt.config.ts"}
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# Module Extend Pages
|
|
||||||
|
|
||||||
This example defines a new `test` page using `extendPages` within a module.
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/guide/going-further/modules"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/advanced/module-extend-pages" file="pages/index.vue"}
|
|
||||||
::
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# Testing
|
|
||||||
|
|
||||||
This example shows how to test your Nuxt application.
|
|
||||||
|
|
||||||
::alert{type=info icon=👉}
|
|
||||||
Learn more about [testing](/docs/getting-started/testing).
|
|
||||||
::
|
|
||||||
|
|
||||||
::ReadMore{link="/docs/getting-started/testing"}
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/advanced/testing" file="app.vue"}
|
|
||||||
::
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# WASM
|
|
||||||
|
|
||||||
This example demonstrates the server-side support of WebAssembly in Nuxt 3.
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/experimental/wasm" file="app.vue"}
|
|
||||||
::
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# Locale
|
|
||||||
|
|
||||||
This example shows how to define a locale composable to handle the application's locale, both server and client side.
|
|
||||||
|
|
||||||
::alert{type=info icon=💡}
|
|
||||||
You can right-click to "View Page Source" and see that Nuxt renders the correct date in SSR based on the visitor's locale.
|
|
||||||
::
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/other/locale" file="app.vue"}
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
---
|
|
||||||
toc: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# Use custom fetch composable
|
|
||||||
|
|
||||||
This example shows a convenient wrapper for the useFetch composable from nuxt. It allows you to customize the fetch request with default values and user authentication token.
|
|
||||||
|
|
||||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/other/use-custom-fetch-composable" file="composables/useCustomFetch.ts"}
|
|
||||||
@ -1 +0,0 @@
|
|||||||
image: '/socials/examples.jpg'
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
navigation: false
|
|
||||||
title: "Examples"
|
|
||||||
redirect: /examples/essentials/hello-world
|
|
||||||
---
|
|
||||||
@ -1,3 +1,4 @@
|
|||||||
# Nuxt 3 Examples
|
# Nuxt 3 Examples
|
||||||
|
|
||||||
👉 https://nuxt.com/docs/examples
|
👉 See examples in your browser at https://nuxt.com/docs/examples
|
||||||
|
👉 View on GitHub at https://github.com/nuxt/examples
|
||||||
|
|||||||
@ -1,10 +0,0 @@
|
|||||||
export default defineAppConfig({
|
|
||||||
foo: 'user',
|
|
||||||
bar: 'user',
|
|
||||||
baz: 'base',
|
|
||||||
array: [
|
|
||||||
'user',
|
|
||||||
'user',
|
|
||||||
'user'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
export default defineAppConfig({
|
|
||||||
bar: 'base',
|
|
||||||
baz: 'base',
|
|
||||||
array: () => [
|
|
||||||
'base',
|
|
||||||
'base',
|
|
||||||
'base'
|
|
||||||
],
|
|
||||||
arrayNested: {
|
|
||||||
nested: {
|
|
||||||
array: [
|
|
||||||
'base',
|
|
||||||
'base',
|
|
||||||
'base'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
<template>
|
|
||||||
<button role="button">
|
|
||||||
<slot />
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
<template>
|
|
||||||
<BaseButton>
|
|
||||||
<slot />
|
|
||||||
</BaseButton>
|
|
||||||
</template>
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
import { useState } from '#app'
|
|
||||||
|
|
||||||
export const useFoo = () => useState('foo', () => 'foo')
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
export default defineNuxtRouteMiddleware(() => {
|
|
||||||
console.log('Hello from extended middleware !')
|
|
||||||
})
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
export default defineNuxtConfig({
|
|
||||||
imports: {
|
|
||||||
dirs: ['utils']
|
|
||||||
},
|
|
||||||
runtimeConfig: {
|
|
||||||
public: {
|
|
||||||
theme: {
|
|
||||||
primaryColor: 'base_primary',
|
|
||||||
secondaryColor: 'base_secondary'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
Hello from extended page !
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
definePageMeta({
|
|
||||||
middleware: 'foo'
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
export default defineNuxtPlugin((/* nuxtApp */) => {
|
|
||||||
return {
|
|
||||||
provide: {
|
|
||||||
myPlugin: () => 'String generated from my auto-imported plugin!'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export default () => 'base'
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export const getBar = () => 'bar'
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
<template>
|
|
||||||
<BaseButton class="fancy-button">
|
|
||||||
<slot />
|
|
||||||
</BaseButton>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
button {
|
|
||||||
appearance: none;
|
|
||||||
background-color: #FAFBFC;
|
|
||||||
border: 1px solid rgba(27, 31, 35, 0.15);
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
|
|
||||||
color: #24292E;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
export default defineNuxtConfig({
|
|
||||||
extends: [
|
|
||||||
'./ui',
|
|
||||||
'./base'
|
|
||||||
],
|
|
||||||
runtimeConfig: {
|
|
||||||
public: {
|
|
||||||
theme: {
|
|
||||||
primaryColor: 'user_primary'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
modules: [
|
|
||||||
'@nuxt/ui'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "example-config-extends",
|
|
||||||
"private": true,
|
|
||||||
"devDependencies": {
|
|
||||||
"@nuxt/ui": "^0.3.3",
|
|
||||||
"nuxt": "^3.0.0"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"dev": "nuxi dev",
|
|
||||||
"build": "nuxi build",
|
|
||||||
"start": "nuxi preview"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
const themeConfig = useRuntimeConfig().theme
|
|
||||||
const appConfig = useAppConfig()
|
|
||||||
const foo = useFoo()
|
|
||||||
const bar = getBar()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<NuxtExampleLayout example="advanced/config-extends">
|
|
||||||
appConfig:
|
|
||||||
<pre>{{ JSON.stringify(appConfig, null, 2) }}</pre>
|
|
||||||
runtimeConfig:
|
|
||||||
<pre>{{ JSON.stringify(themeConfig, null, 2) }}</pre>
|
|
||||||
<BaseButton>Base Button</BaseButton>
|
|
||||||
<FancyButton>Fancy Button</FancyButton>
|
|
||||||
<UIButton>UI Button</UIButton>
|
|
||||||
<br>
|
|
||||||
{{ foo }} {{ bar }}
|
|
||||||
<br>
|
|
||||||
{{ $myPlugin() }}
|
|
||||||
</NuxtExampleLayout>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
pre {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export default () => 'hello'
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": "./.nuxt/tsconfig.json"
|
|
||||||
}
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
defineProps({
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: 'black'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<button class="ui-button" :style="{ color }">
|
|
||||||
<slot />
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export default defineNuxtConfig({
|
|
||||||
components: [
|
|
||||||
{ path: './components', prefix: 'UI' }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
<script lang="tsx" setup>
|
|
||||||
// Component could be a simple function with JSX syntax
|
|
||||||
const Welcome = () => <span>Welcome </span>
|
|
||||||
|
|
||||||
// Or using defineComponent setup that returns render function with JSX syntax
|
|
||||||
const Nuxt3 = defineComponent(() => {
|
|
||||||
return () => <span>nuxt3</span>
|
|
||||||
})
|
|
||||||
|
|
||||||
// We can combine components with JSX syntax too
|
|
||||||
const InlineComponent = () => (
|
|
||||||
<div>
|
|
||||||
<Welcome />
|
|
||||||
<span>to </span>
|
|
||||||
<Nuxt3 />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<NuxtExampleLayout example="advanced/jsx">
|
|
||||||
<InlineComponent />
|
|
||||||
<!-- Defined in components/jsx-component.ts -->
|
|
||||||
<MyComponent message="This is an external JSX component" />
|
|
||||||
</NuxtExampleLayout>
|
|
||||||
</template>
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
export default defineComponent({
|
|
||||||
props: {
|
|
||||||
message: String
|
|
||||||
},
|
|
||||||
render: (props) => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{ props.message }
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export default defineNuxtConfig({
|
|
||||||
modules: [
|
|
||||||
'@nuxt/ui'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "example-jsx",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"build": "nuxi build",
|
|
||||||
"dev": "nuxi dev",
|
|
||||||
"start": "nuxi preview"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@nuxt/ui": "^0.3.3",
|
|
||||||
"nuxt": "^3.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": "./.nuxt/tsconfig.json"
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
<template>
|
|
||||||
<NuxtExampleLayout example="advanced/module-extend-pages">
|
|
||||||
<slot />
|
|
||||||
</NuxtExampleLayout>
|
|
||||||
</template>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import { defineNuxtModule, extendPages } from '@nuxt/kit'
|
|
||||||
import { resolve } from 'pathe'
|
|
||||||
|
|
||||||
export default defineNuxtModule({
|
|
||||||
setup () {
|
|
||||||
extendPages((pages) => {
|
|
||||||
// Add /test page
|
|
||||||
pages.push({
|
|
||||||
name: 'Test',
|
|
||||||
path: '/test',
|
|
||||||
file: resolve(__dirname, './pages/test.vue')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<p>
|
|
||||||
Go to <NuxtLink to="/">
|
|
||||||
Homepage
|
|
||||||
</NuxtLink>
|
|
||||||
</p>
|
|
||||||
<p>Test page added by module</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
export default defineNuxtConfig({
|
|
||||||
modules: [
|
|
||||||
'~/modules/pages',
|
|
||||||
'@nuxt/ui'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "example-module-extend-pages",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"build": "nuxi build",
|
|
||||||
"dev": "nuxi dev",
|
|
||||||
"start": "nuxi preview"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@nuxt/ui": "^0.3.3",
|
|
||||||
"nuxt": "^3.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
Go to <NuxtLink to="/test">
|
|
||||||
Test Page
|
|
||||||
</NuxtLink>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": "./.nuxt/tsconfig.json"
|
|
||||||
}
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="hello">
|
|
||||||
Hello Nuxt!
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.hello {
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
font-size: 3rem;
|
|
||||||
padding: 10rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
export default defineNuxtConfig({
|
|
||||||
})
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "example-testing",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"build": "nuxi build",
|
|
||||||
"dev": "nuxi dev",
|
|
||||||
"start": "nuxi preview",
|
|
||||||
"test": "nuxi test"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@nuxt/test-utils": "^3.0.0",
|
|
||||||
"nuxt": "^3.0.0",
|
|
||||||
"vitest": "latest"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import { describe, expect, it } from 'vitest'
|
|
||||||
import { $fetch, isDev } from '@nuxt/test-utils'
|
|
||||||
|
|
||||||
describe('example', () => {
|
|
||||||
it('Renders Hello Nuxt', async () => {
|
|
||||||
expect(await $fetch('/')).toMatch('Hello Nuxt!')
|
|
||||||
})
|
|
||||||
|
|
||||||
if (isDev()) {
|
|
||||||
it('[dev] ensure vite client script is added', async () => {
|
|
||||||
expect(await $fetch('/')).toMatch('/_nuxt/@vite/client"')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": "./.nuxt/tsconfig.json"
|
|
||||||
}
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
export default defineAppConfig({
|
|
||||||
title: 'Hello App Config',
|
|
||||||
description:
|
|
||||||
'This is some content coming from app.config.ts that support HMR, try to update it and see it in action.',
|
|
||||||
showButton: false
|
|
||||||
})
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
const config = useAppConfig()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<NuxtExampleLayout example="app-config">
|
|
||||||
<h1>{{ config.title }}</h1>
|
|
||||||
<p>{{ config.description }}</p>
|
|
||||||
<button v-if="config.showButton">
|
|
||||||
I am a button
|
|
||||||
</button>
|
|
||||||
</NuxtExampleLayout>
|
|
||||||
</template>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export default defineNuxtConfig({
|
|
||||||
modules: [
|
|
||||||
'@nuxt/ui'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "example-app-config",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"build": "nuxi build",
|
|
||||||
"dev": "nuxi dev",
|
|
||||||
"start": "nuxi preview"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@nuxt/ui": "^0.3.3",
|
|
||||||
"nuxt": "^3.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": "./.nuxt/tsconfig.json"
|
|
||||||
}
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { showError } from '#app'
|
|
||||||
const route = useRoute()
|
|
||||||
if ('setup' in route.query) {
|
|
||||||
throw new Error('error in setup')
|
|
||||||
}
|
|
||||||
if ('mounted' in route.query) {
|
|
||||||
onMounted(() => {
|
|
||||||
throw new Error('error in mounted')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function triggerError () {
|
|
||||||
throw new Error('manually triggered error')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<NuxtExampleLayout example="app/error-handling">
|
|
||||||
<template #nav>
|
|
||||||
<nav class="flex align-center gap-4 p-4">
|
|
||||||
<NuxtLink to="/" class="n-link-base">
|
|
||||||
Home
|
|
||||||
</NuxtLink>
|
|
||||||
<NuxtLink to="/other" class="n-link-base">
|
|
||||||
Other
|
|
||||||
</NuxtLink>
|
|
||||||
<NuxtLink to="/404" class="n-link-base">
|
|
||||||
404
|
|
||||||
</NuxtLink>
|
|
||||||
<NuxtLink to="/?middleware" class="n-link-base">
|
|
||||||
Middleware
|
|
||||||
</NuxtLink>
|
|
||||||
<button class="n-link-base" @click="showError">
|
|
||||||
Trigger fatal error
|
|
||||||
</button>
|
|
||||||
<button class="n-link-base" @click="triggerError">
|
|
||||||
Trigger non-fatal error
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #footer>
|
|
||||||
<div class="text-center p-4 op-50">
|
|
||||||
Current route: <code>{{ route.path }}</code>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</NuxtExampleLayout>
|
|
||||||
</template>
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
const hasIssue = ref(true)
|
|
||||||
|
|
||||||
const fixIssue = (error) => {
|
|
||||||
hasIssue.value = false
|
|
||||||
error.value = null
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<NuxtErrorBoundary>
|
|
||||||
<throw-error v-if="hasIssue" />
|
|
||||||
<div v-else>
|
|
||||||
Component is working ^_^
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template #error="{ error }">
|
|
||||||
Component failed to Render -_-
|
|
||||||
<button @click="fixIssue(error)">
|
|
||||||
(fix the issue)
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
</NuxtErrorBoundary>
|
|
||||||
</template>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
throw new Error('Deliberate error by <ThrowError>')
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>Should never see this</div>
|
|
||||||
</template>
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="relative font-sans" n="green6">
|
|
||||||
<div class="container max-w-200 mx-auto py-10 px-4">
|
|
||||||
<h1>{{ error.message }}</h1>
|
|
||||||
There was an error 😱
|
|
||||||
|
|
||||||
<br>
|
|
||||||
<button @click="handleError">
|
|
||||||
Clear error
|
|
||||||
</button>
|
|
||||||
<br>
|
|
||||||
<NuxtLink to="/404">
|
|
||||||
Trigger another error
|
|
||||||
</NuxtLink>
|
|
||||||
<br>
|
|
||||||
<NuxtLink to="/">
|
|
||||||
Navigate home
|
|
||||||
</NuxtLink>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
defineProps({
|
|
||||||
error: Object
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleError = () => clearError({ redirect: '/' })
|
|
||||||
</script>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export default defineNuxtRouteMiddleware((to) => {
|
|
||||||
if ('middleware' in to.query) {
|
|
||||||
return showError('error in middleware')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export default defineNuxtConfig({
|
|
||||||
modules: [
|
|
||||||
'@nuxt/ui'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "example-error-handling",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"build": "nuxi build",
|
|
||||||
"dev": "nuxi dev",
|
|
||||||
"start": "nuxi preview"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@nuxt/ui": "^0.3.3",
|
|
||||||
"nuxt": "^3.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
<template>
|
|
||||||
<h1>Index</h1>
|
|
||||||
</template>
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
<template>
|
|
||||||
<h1>Other</h1>
|
|
||||||
</template>
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
export default defineNuxtPlugin((nuxtApp) => {
|
|
||||||
nuxtApp.hook('vue:error', (..._args) => {
|
|
||||||
console.log('vue:error')
|
|
||||||
// if (process.client) {
|
|
||||||
// console.log(..._args)
|
|
||||||
// }
|
|
||||||
})
|
|
||||||
nuxtApp.hook('app:error', (..._args) => {
|
|
||||||
console.log('app:error')
|
|
||||||
// if (process.client) {
|
|
||||||
// console.log(..._args)
|
|
||||||
// }
|
|
||||||
})
|
|
||||||
nuxtApp.vueApp.config.errorHandler = (..._args) => {
|
|
||||||
console.log('global error handler')
|
|
||||||
// if (process.client) {
|
|
||||||
// console.log(..._args)
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
import { defineEventHandler, getQuery } from 'h3'
|
|
||||||
|
|
||||||
export default defineEventHandler((event) => {
|
|
||||||
if ('api' in getQuery(event)) {
|
|
||||||
throw new Error('Server middleware error')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": "./.nuxt/tsconfig.json"
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
<template>
|
|
||||||
<NuxtExampleLayout example="app/plugins">
|
|
||||||
<div>{{ $myPlugin() }}</div>
|
|
||||||
</NuxtExampleLayout>
|
|
||||||
</template>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export default defineNuxtConfig({
|
|
||||||
modules: [
|
|
||||||
'@nuxt/ui'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "example-plugins",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"build": "nuxi build",
|
|
||||||
"dev": "nuxi dev",
|
|
||||||
"start": "nuxi preview"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@nuxt/ui": "^0.3.3",
|
|
||||||
"nuxt": "^3.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
export default defineNuxtPlugin((/* nuxtApp */) => {
|
|
||||||
return {
|
|
||||||
provide: {
|
|
||||||
myPlugin: () => 'String generated from my auto-imported plugin!'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": "./.nuxt/tsconfig.json"
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<template>
|
|
||||||
<NuxtExampleLayout example="app/teleport">
|
|
||||||
<div>
|
|
||||||
<!-- SSR Teleport -->
|
|
||||||
<Teleport to="body">
|
|
||||||
SSR Teleport
|
|
||||||
</Teleport>
|
|
||||||
|
|
||||||
<!-- Client Teleport -->
|
|
||||||
<ClientOnly>
|
|
||||||
<Teleport to="body">
|
|
||||||
<div>
|
|
||||||
Hello from a client-side teleport!
|
|
||||||
</div>
|
|
||||||
</Teleport>
|
|
||||||
</ClientOnly>
|
|
||||||
|
|
||||||
<!-- Modal Example -->
|
|
||||||
<MyModal />
|
|
||||||
</div>
|
|
||||||
</NuxtExampleLayout>
|
|
||||||
</template>
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
<script>
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
open: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<NButton @click="open = true">
|
|
||||||
Open Modal
|
|
||||||
</NButton>
|
|
||||||
<Teleport to="body">
|
|
||||||
<NCard v-if="open" class="modal p4">
|
|
||||||
<p>Hello from the modal!</p>
|
|
||||||
<NButton @click="open = false">
|
|
||||||
Close
|
|
||||||
</NButton>
|
|
||||||
</NCard>
|
|
||||||
</Teleport>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.modal {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 999;
|
|
||||||
top: 20%;
|
|
||||||
left: 50%;
|
|
||||||
width: 300px;
|
|
||||||
margin-left: -150px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export default defineNuxtConfig({
|
|
||||||
modules: [
|
|
||||||
'@nuxt/ui'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "example-teleport",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"build": "nuxi build",
|
|
||||||
"dev": "nuxi dev",
|
|
||||||
"start": "nuxi preview"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@nuxt/ui": "^0.3.3",
|
|
||||||
"nuxt": "^3.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": "./.nuxt/tsconfig.json"
|
|
||||||
}
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<template>
|
|
||||||
<NuxtExampleLayout example="auto-imports/components">
|
|
||||||
<h1 class="text-xl opacity-50">
|
|
||||||
Auto Imported Components
|
|
||||||
</h1>
|
|
||||||
<div>
|
|
||||||
<!-- Auto Imported Components -->
|
|
||||||
<HelloWorld class="text-2xl" />
|
|
||||||
<Nuxt3 class="text-2xl" />
|
|
||||||
<ParentFolderHello class="mt-6" />
|
|
||||||
<ClientAndServer style="color: red">
|
|
||||||
<div>[Slot]</div>
|
|
||||||
</ClientAndServer>
|
|
||||||
<JustClient />
|
|
||||||
<NuxtWithPrefix class="mt-6" />
|
|
||||||
</div>
|
|
||||||
</NuxtExampleLayout>
|
|
||||||
</template>
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
const width = window.innerWidth
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
Window width: {{ width }}
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
Loading width... (server fallback)
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
console.log('Hi from Server Component!')
|
|
||||||
</script>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
This is HelloWorld component!
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
const height = window.innerHeight
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
This is client only.
|
|
||||||
Window height: {{ height }}
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
<template>
|
|
||||||
<b style="color: #00C58E">
|
|
||||||
From Nuxt 3
|
|
||||||
</b>
|
|
||||||
</template>
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
const props = defineProps({ foo: Number })
|
|
||||||
const colors = [
|
|
||||||
'red',
|
|
||||||
'blue',
|
|
||||||
'yellow'
|
|
||||||
]
|
|
||||||
const color = colors[(props.foo ?? 1) % colors.length]
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<section class="flex flex-col gap-1 p-4">
|
|
||||||
I'm a server component with some reactive state: {{ foo }}
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.flex {
|
|
||||||
color: v-bind(color)
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
<template>
|
|
||||||
<NCard class="flex flex-col gap-1 p-4">
|
|
||||||
Components in sub folders
|
|
||||||
<code class="op50">`components/parent-folder/hello.vue`</code>
|
|
||||||
can be auto imported with folder name as the prefix:
|
|
||||||
<code class="text-lime6"><ParentFolderHello/></code>
|
|
||||||
</NCard>
|
|
||||||
</template>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
export default defineNuxtConfig({
|
|
||||||
modules: [
|
|
||||||
'@nuxt/ui'
|
|
||||||
],
|
|
||||||
components: {
|
|
||||||
dirs: [
|
|
||||||
'~/components',
|
|
||||||
{
|
|
||||||
path: '~/other-components-folder',
|
|
||||||
extensions: ['vue'],
|
|
||||||
prefix: 'nuxt'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user