chore: add examples directory (#115)

This commit is contained in:
pooya parsa 2021-04-23 22:30:43 +02:00 committed by GitHub
parent 5aa59c2ca5
commit ca466e08a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 159 additions and 96 deletions

View File

@ -1,6 +1,7 @@
{
"globals": {
"NodeJS": true
"NodeJS": true,
"$fetch": true
},
"plugins": ["jsdoc"],
"extends": [

View File

@ -0,0 +1,4 @@
import { defineNuxtConfig } from '@nuxt/kit'
export default defineNuxtConfig({
})

View File

@ -0,0 +1,12 @@
{
"name": "example-async-data",
"private": true,
"devDependencies": {
"nuxt3": "^0.5.1"
},
"scripts": {
"dev": "nu dev",
"build": "nu build",
"start": "node .output/server"
}
}

View File

@ -0,0 +1,19 @@
<template>
<div>
Page visits: {{ data.count }}
</div>
</template>
<script lang="ts">
import { defineNuxtComponent, asyncData } from '@nuxt/app'
export default defineNuxtComponent({
setup () {
const { data } = asyncData('time', () => $fetch('/api/count'))
return {
data
}
}
})
</script>

View File

@ -0,0 +1,3 @@
let ctr = 0
export default () => ({ count: ++ctr })

View File

@ -0,0 +1,5 @@
<template>
<div>
Hello Nuxt!
</div>
</template>

View File

@ -0,0 +1,4 @@
import { defineNuxtConfig } from '@nuxt/kit'
export default defineNuxtConfig({
})

View File

@ -0,0 +1,12 @@
{
"name": "example-hello-world",
"private": true,
"devDependencies": {
"nuxt3": "^0.5.1"
},
"scripts": {
"dev": "nu dev",
"build": "nu build",
"start": "node .output/server"
}
}

12
examples/pages/app.vue Normal file
View File

@ -0,0 +1,12 @@
<template>
<div>
<NuxtLink to="/">
Home
</NuxtLink>
<NuxtLink to="/about">
About
</NuxtLink>
<NuxtPage />
</div>
</template>

View File

@ -0,0 +1,4 @@
import { defineNuxtConfig } from '@nuxt/kit'
export default defineNuxtConfig({
})

View File

@ -0,0 +1,12 @@
{
"name": "example-pages",
"private": true,
"devDependencies": {
"nuxt3": "^0.5.1"
},
"scripts": {
"dev": "nu dev",
"build": "nu build",
"start": "node .output/server"
}
}

View File

@ -0,0 +1,5 @@
<template>
<div>
About
</div>
</template>

View File

@ -0,0 +1,5 @@
<template>
<div>
Home
</div>
</template>

View File

@ -0,0 +1,5 @@
<template>
<div>
Hello Nuxt+Vite!
</div>
</template>

View File

@ -0,0 +1,5 @@
import { defineNuxtConfig } from '@nuxt/kit'
export default defineNuxtConfig({
vite: true
})

View File

@ -0,0 +1,12 @@
{
"name": "example-with-vite",
"private": true,
"devDependencies": {
"nuxt3": "^0.5.1"
},
"scripts": {
"dev": "nu dev",
"build": "nu build",
"start": "node .output/server"
}
}

View File

@ -3,6 +3,7 @@
"license": "MIT",
"workspaces": [
"packages/*",
"examples/*",
"docs"
],
"scripts": {
@ -12,6 +13,8 @@
"docs": "yarn nu dev docs",
"nu": "./node_modules/.bin/nu",
"play": "yarn run nu dev playground",
"example": "yarn workspace example-$0 dev",
"example:build": "yarn workspace example-$0 build",
"lint": "eslint --ext .vue,.ts,.js .",
"test": "yarn lint && jest",
"test:compat": "TEST_COMPAT=1 jest",

View File

@ -1,37 +0,0 @@
<template>
<div>
<nuxt-link to="/">
Home
</nuxt-link>
<h2>{{ $route.path }}</h2>
<pre>{{ foo }}</pre>
<pre>{{ bar }}</pre>
<pre>{{ from }}</pre>
</div>
</template>
<script>
import { defineNuxtComponent, asyncData } from '@nuxt/app'
const waitFor = (ms = 0) => new Promise(resolve => setTimeout(resolve, ms))
export default defineNuxtComponent({
setup () {
const { data: foo } = asyncData('foo', async () => {
await waitFor(500)
return { foo: true }
})
const { data: bar } = asyncData('bar', async () => {
await waitFor(500)
return { bar: true }
})
const { data: from } = asyncData('from', () => ({ from: process.server ? 'server' : 'client' }))
return {
foo,
bar,
from
}
}
})
</script>

View File

@ -1,39 +0,0 @@
<template>
<div>
<nuxt-link to="/">
Home
</nuxt-link>
<h2>{{ $route.path }}</h2>
<pre>{{ foo }}</pre>
<pre>{{ bar }}</pre>
<pre>{{ from }}</pre>
</div>
</template>
<script>
import { useAsyncData } from '@nuxt/app'
const waitFor = (ms = 0) => new Promise(resolve => setTimeout(resolve, ms))
export default {
async setup () {
const asyncData = useAsyncData()
const { data: foo } = await asyncData('foo', async () => {
await waitFor(500)
return { foo: true }
})
const { data: bar } = await asyncData('bar', async () => {
await waitFor(500)
return { bar: true }
})
const { data: from } = await asyncData('from', () => ({ from: process.server ? 'server' : 'client' }))
return {
foo,
bar,
from
}
}
}
</script>

View File

@ -1,28 +1,12 @@
<template>
<div>
<h2>
Hello world
</h2>
<strong>Playground pages</strong>
<ul>
<li v-for="link of links" :key="link">
<nuxt-link :to="link">
{{ link }}
</nuxt-link>
</li>
</ul>
...
</div>
</template>
<script>
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { defineNuxtComponent } from '@nuxt/app'
export default defineComponent({
setup () {
const links = useRouter().getRoutes().filter(route => ['index', '404'].includes(route.name) === false).map(route => route.path)
return { links }
}
export default defineNuxtComponent({
})
</script>

View File

@ -6190,6 +6190,38 @@ __metadata:
languageName: node
linkType: hard
"example-async-data@workspace:examples/async-data":
version: 0.0.0-use.local
resolution: "example-async-data@workspace:examples/async-data"
dependencies:
nuxt3: ^0.5.1
languageName: unknown
linkType: soft
"example-hello-world@workspace:examples/hello-world":
version: 0.0.0-use.local
resolution: "example-hello-world@workspace:examples/hello-world"
dependencies:
nuxt3: ^0.5.1
languageName: unknown
linkType: soft
"example-pages@workspace:examples/pages":
version: 0.0.0-use.local
resolution: "example-pages@workspace:examples/pages"
dependencies:
nuxt3: ^0.5.1
languageName: unknown
linkType: soft
"example-with-vite@workspace:examples/with-vite":
version: 0.0.0-use.local
resolution: "example-with-vite@workspace:examples/with-vite"
dependencies:
nuxt3: ^0.5.1
languageName: unknown
linkType: soft
"exec-sh@npm:^0.3.2":
version: 0.3.6
resolution: "exec-sh@npm:0.3.6"