mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-25 07:05:11 +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
|
||||
|
||||
👉 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