From afcaaff57d7ae170e88f8134aa0d8e62c0bfa7f2 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Fri, 24 Dec 2021 03:27:08 +0800 Subject: [PATCH] chore(example): use `@nuxt/ui` for examples (#2325) Co-authored-by: Daniel Roe Co-authored-by: Pooya Parsa --- docs/content/1.getting-started/3.bridge.md | 4 +- examples/hello-world/app.vue | 16 +- examples/hello-world/package.json | 10 +- examples/locale/app.vue | 25 +- examples/locale/composables/locale.ts | 5 +- examples/locale/nuxt.config.ts | 3 + examples/locale/package.json | 11 +- .../module-extend-pages/layouts/default.vue | 5 + examples/module-extend-pages/nuxt.config.ts | 5 +- examples/module-extend-pages/package.json | 11 +- examples/use-async-data/app.vue | 30 +- examples/use-async-data/nuxt.config.ts | 4 +- examples/use-async-data/package.json | 11 +- examples/use-cookie/app.vue | 65 +- examples/use-cookie/nuxt.config.ts | 3 + examples/use-cookie/package.json | 11 +- examples/use-fetch/app.vue | 23 +- examples/use-fetch/nuxt.config.ts | 3 + examples/use-fetch/package.json | 11 +- examples/use-meta/app.vue | 34 +- examples/use-meta/nuxt.config.ts | 3 + examples/use-meta/package.json | 9 +- examples/use-state/app.vue | 31 +- examples/use-state/nuxt.config.ts | 3 + examples/use-state/package.json | 11 +- examples/use-state/tsconfig.json | 2 +- examples/with-components/app.vue | 25 +- .../components/parent-folder/Hello.vue | 8 + .../components/parent-folder/index.vue | 5 - examples/with-components/nuxt.config.ts | 4 +- examples/with-components/package.json | 11 +- examples/with-composables/nuxt.config.ts | 3 + examples/with-composables/package.json | 11 +- examples/with-layouts/package.json | 11 +- examples/with-pages/app.vue | 44 +- examples/with-pages/nuxt.config.ts | 3 + examples/with-pages/package.json | 11 +- examples/with-wasm/app.vue | 11 +- examples/with-wasm/nuxt.config.ts | 5 +- examples/with-wasm/package.json | 2 +- package.json | 4 + playground/app.vue | 2 +- playground/nuxt.config.ts | 3 + playground/package.json | 2 +- yarn.lock | 1115 +++++++++++------ 45 files changed, 1079 insertions(+), 550 deletions(-) create mode 100644 examples/module-extend-pages/layouts/default.vue create mode 100644 examples/with-components/components/parent-folder/Hello.vue delete mode 100644 examples/with-components/components/parent-folder/index.vue diff --git a/docs/content/1.getting-started/3.bridge.md b/docs/content/1.getting-started/3.bridge.md index 4572d4fcf3..af64ac3d0c 100644 --- a/docs/content/1.getting-started/3.bridge.md +++ b/docs/content/1.getting-started/3.bridge.md @@ -74,7 +74,7 @@ Nuxt 3 introduced the new Nuxt CLI command [`nuxi`](/getting-started/commands/). - "build": "nuxt build", + "build": "nuxi build", - "start": "nuxt start", -+ "start": "node .output/server/index.mjs" ++ "start": "nuxi preview" } } ``` @@ -99,7 +99,7 @@ For all other situations, you can use the `nuxi build` command. { "scripts": { "build": "nuxi build", - "start": "node .output/server/index.mjs" + "start": "nuxi preview" } } ``` diff --git a/examples/hello-world/app.vue b/examples/hello-world/app.vue index 9b85b82783..19a4e3e12c 100644 --- a/examples/hello-world/app.vue +++ b/examples/hello-world/app.vue @@ -1,5 +1,17 @@ + + + + diff --git a/examples/hello-world/package.json b/examples/hello-world/package.json index 7cc456e507..0ffb9d6b51 100644 --- a/examples/hello-world/package.json +++ b/examples/hello-world/package.json @@ -1,12 +1,12 @@ { "name": "example-hello-world", "private": true, + "scripts": { + "build": "nuxi build", + "dev": "nuxi dev", + "start": "nuxi preview" + }, "devDependencies": { "nuxt3": "latest" - }, - "scripts": { - "dev": "nuxi dev", - "build": "nuxi build", - "start": "node .output/server/index.mjs" } } diff --git a/examples/locale/app.vue b/examples/locale/app.vue index 520f4d4304..286c40061d 100644 --- a/examples/locale/app.vue +++ b/examples/locale/app.vue @@ -1,17 +1,30 @@ - diff --git a/examples/locale/composables/locale.ts b/examples/locale/composables/locale.ts index 37523b12af..991ab9678f 100644 --- a/examples/locale/composables/locale.ts +++ b/examples/locale/composables/locale.ts @@ -26,6 +26,7 @@ export const useLocales = () => { 'en-US', 'en-GB', 'ko-KR', + 'zh-CN', 'ar-EG', 'fa-IR', 'ja-JP-u-ca-japanese' @@ -38,6 +39,6 @@ export const useLocales = () => { // Using Intl.DateTimeFormat for language-sensitive date and time formatting // Learn more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -export const useLocaleDate = (date: Ref, locale = useLocale()) => { - return computed(() => new Intl.DateTimeFormat(locale.value).format(date.value)) +export const useLocaleDate = (date: Ref | Date, locale = useLocale()) => { + return computed(() => new Intl.DateTimeFormat(locale.value, { dateStyle: 'full' }).format(unref(date))) } diff --git a/examples/locale/nuxt.config.ts b/examples/locale/nuxt.config.ts index a3e4d68096..9850816d15 100644 --- a/examples/locale/nuxt.config.ts +++ b/examples/locale/nuxt.config.ts @@ -1,4 +1,7 @@ import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ + modules: [ + '@nuxt/ui' + ] }) diff --git a/examples/locale/package.json b/examples/locale/package.json index e189a24da7..713b9f206f 100644 --- a/examples/locale/package.json +++ b/examples/locale/package.json @@ -1,12 +1,13 @@ { "name": "example-locale", "private": true, - "devDependencies": { - "nuxt3": "latest" - }, "scripts": { - "dev": "nuxi dev", "build": "nuxi build", - "start": "node .output/server/index.mjs" + "dev": "nuxi dev", + "start": "nuxi preview" + }, + "devDependencies": { + "@nuxt/ui": "npm:@nuxt/ui-edge@latest", + "nuxt3": "latest" } } diff --git a/examples/module-extend-pages/layouts/default.vue b/examples/module-extend-pages/layouts/default.vue new file mode 100644 index 0000000000..fec82618c2 --- /dev/null +++ b/examples/module-extend-pages/layouts/default.vue @@ -0,0 +1,5 @@ + diff --git a/examples/module-extend-pages/nuxt.config.ts b/examples/module-extend-pages/nuxt.config.ts index 69cd9ba207..171d48eb19 100644 --- a/examples/module-extend-pages/nuxt.config.ts +++ b/examples/module-extend-pages/nuxt.config.ts @@ -1,7 +1,8 @@ import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ - buildModules: [ - '~/modules/pages' + modules: [ + '~/modules/pages', + '@nuxt/ui' ] }) diff --git a/examples/module-extend-pages/package.json b/examples/module-extend-pages/package.json index ba37e74838..80ca357d5e 100644 --- a/examples/module-extend-pages/package.json +++ b/examples/module-extend-pages/package.json @@ -1,12 +1,13 @@ { "name": "example-module-extend-pages", "private": true, - "devDependencies": { - "nuxt3": "latest" - }, "scripts": { - "dev": "nuxi dev", "build": "nuxi build", - "start": "node .output/server/index.mjs" + "dev": "nuxi dev", + "start": "nuxi preview" + }, + "devDependencies": { + "@nuxt/ui": "npm:@nuxt/ui-edge@latest", + "nuxt3": "latest" } } diff --git a/examples/use-async-data/app.vue b/examples/use-async-data/app.vue index 83cf6d4bdc..84038f4933 100644 --- a/examples/use-async-data/app.vue +++ b/examples/use-async-data/app.vue @@ -1,12 +1,24 @@ - - + + diff --git a/examples/use-async-data/nuxt.config.ts b/examples/use-async-data/nuxt.config.ts index 04515cb687..9850816d15 100644 --- a/examples/use-async-data/nuxt.config.ts +++ b/examples/use-async-data/nuxt.config.ts @@ -1,5 +1,7 @@ import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ - // vite: true + modules: [ + '@nuxt/ui' + ] }) diff --git a/examples/use-async-data/package.json b/examples/use-async-data/package.json index 39686f421d..e7a18d0956 100644 --- a/examples/use-async-data/package.json +++ b/examples/use-async-data/package.json @@ -1,12 +1,13 @@ { "name": "example-use-async-data", "private": true, - "devDependencies": { - "nuxt3": "latest" - }, "scripts": { - "dev": "nuxi dev", "build": "nuxi build", - "start": "node .output/server/index.mjs" + "dev": "nuxi dev", + "start": "nuxi preview" + }, + "devDependencies": { + "@nuxt/ui": "npm:@nuxt/ui-edge@latest", + "nuxt3": "latest" } } diff --git a/examples/use-cookie/app.vue b/examples/use-cookie/app.vue index ae296cfe0f..b822b460a3 100644 --- a/examples/use-cookie/app.vue +++ b/examples/use-cookie/app.vue @@ -1,30 +1,59 @@ - diff --git a/examples/use-cookie/nuxt.config.ts b/examples/use-cookie/nuxt.config.ts index a3e4d68096..9850816d15 100644 --- a/examples/use-cookie/nuxt.config.ts +++ b/examples/use-cookie/nuxt.config.ts @@ -1,4 +1,7 @@ import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ + modules: [ + '@nuxt/ui' + ] }) diff --git a/examples/use-cookie/package.json b/examples/use-cookie/package.json index 95fa988e2a..c0ab43226d 100644 --- a/examples/use-cookie/package.json +++ b/examples/use-cookie/package.json @@ -1,12 +1,13 @@ { "name": "example-use-cookie", "private": true, - "devDependencies": { - "nuxt3": "latest" - }, "scripts": { - "dev": "nuxi dev", "build": "nuxi build", - "start": "node .output/server/index.mjs" + "dev": "nuxi dev", + "start": "nuxi preview" + }, + "devDependencies": { + "@nuxt/ui": "npm:@nuxt/ui-edge@latest", + "nuxt3": "latest" } } diff --git a/examples/use-fetch/app.vue b/examples/use-fetch/app.vue index 9753a68a7c..51b90ddcf1 100644 --- a/examples/use-fetch/app.vue +++ b/examples/use-fetch/app.vue @@ -1,9 +1,20 @@ - - + + diff --git a/examples/use-fetch/nuxt.config.ts b/examples/use-fetch/nuxt.config.ts index a3e4d68096..9850816d15 100644 --- a/examples/use-fetch/nuxt.config.ts +++ b/examples/use-fetch/nuxt.config.ts @@ -1,4 +1,7 @@ import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ + modules: [ + '@nuxt/ui' + ] }) diff --git a/examples/use-fetch/package.json b/examples/use-fetch/package.json index aa851d76fe..242c86eb3b 100644 --- a/examples/use-fetch/package.json +++ b/examples/use-fetch/package.json @@ -1,12 +1,13 @@ { "name": "example-use-fetch", "private": true, - "devDependencies": { - "nuxt3": "latest" - }, "scripts": { - "dev": "nuxi dev", "build": "nuxi build", - "start": "node .output/server/index.mjs" + "dev": "nuxi dev", + "start": "nuxi preview" + }, + "devDependencies": { + "@nuxt/ui": "npm:@nuxt/ui-edge@latest", + "nuxt3": "latest" } } diff --git a/examples/use-meta/app.vue b/examples/use-meta/app.vue index 8483e704f1..b176e86b4e 100644 --- a/examples/use-meta/app.vue +++ b/examples/use-meta/app.vue @@ -1,23 +1,39 @@ - diff --git a/examples/use-state/nuxt.config.ts b/examples/use-state/nuxt.config.ts index a3e4d68096..9850816d15 100644 --- a/examples/use-state/nuxt.config.ts +++ b/examples/use-state/nuxt.config.ts @@ -1,4 +1,7 @@ import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ + modules: [ + '@nuxt/ui' + ] }) diff --git a/examples/use-state/package.json b/examples/use-state/package.json index 6b16654c58..bfc5a0f2bf 100644 --- a/examples/use-state/package.json +++ b/examples/use-state/package.json @@ -1,12 +1,13 @@ { "name": "example-use-state", "private": true, - "devDependencies": { - "nuxt3": "latest" - }, "scripts": { - "dev": "nuxi dev", "build": "nuxi build", - "start": "node .output/server/index.mjs" + "dev": "nuxi dev", + "start": "nuxi preview" + }, + "devDependencies": { + "@nuxt/ui": "npm:@nuxt/ui-edge@latest", + "nuxt3": "latest" } } diff --git a/examples/use-state/tsconfig.json b/examples/use-state/tsconfig.json index 4b34df1571..dfaf3c6d8f 100644 --- a/examples/use-state/tsconfig.json +++ b/examples/use-state/tsconfig.json @@ -1,3 +1,3 @@ { - "extends": "./.nuxt/tsconfig.json" + "extends": "./.nuxt/tsconfig.json", } diff --git a/examples/with-components/app.vue b/examples/with-components/app.vue index 96d95aad4a..b11c5db39c 100644 --- a/examples/with-components/app.vue +++ b/examples/with-components/app.vue @@ -1,6 +1,23 @@ diff --git a/examples/with-components/components/parent-folder/Hello.vue b/examples/with-components/components/parent-folder/Hello.vue new file mode 100644 index 0000000000..36614a01db --- /dev/null +++ b/examples/with-components/components/parent-folder/Hello.vue @@ -0,0 +1,8 @@ + diff --git a/examples/with-components/components/parent-folder/index.vue b/examples/with-components/components/parent-folder/index.vue deleted file mode 100644 index e2e823e6a8..0000000000 --- a/examples/with-components/components/parent-folder/index.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/examples/with-components/nuxt.config.ts b/examples/with-components/nuxt.config.ts index 01b4f600a9..8971086b9b 100644 --- a/examples/with-components/nuxt.config.ts +++ b/examples/with-components/nuxt.config.ts @@ -1,7 +1,9 @@ import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ - vite: false, + modules: [ + '@nuxt/ui' + ], components: { dirs: [ '~/components', diff --git a/examples/with-components/package.json b/examples/with-components/package.json index 41e9c6761e..8d92c0fd5f 100644 --- a/examples/with-components/package.json +++ b/examples/with-components/package.json @@ -1,12 +1,13 @@ { "name": "example-with-components", "private": true, - "devDependencies": { - "nuxt3": "latest" - }, "scripts": { - "dev": "nuxi dev", "build": "nuxi build", - "start": "node .output/server/index.mjs" + "dev": "nuxi dev", + "start": "nuxi preview" + }, + "devDependencies": { + "@nuxt/ui": "npm:@nuxt/ui-edge@latest", + "nuxt3": "latest" } } diff --git a/examples/with-composables/nuxt.config.ts b/examples/with-composables/nuxt.config.ts index a3e4d68096..9850816d15 100644 --- a/examples/with-composables/nuxt.config.ts +++ b/examples/with-composables/nuxt.config.ts @@ -1,4 +1,7 @@ import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ + modules: [ + '@nuxt/ui' + ] }) diff --git a/examples/with-composables/package.json b/examples/with-composables/package.json index b12e041bd4..666b5ab0e0 100644 --- a/examples/with-composables/package.json +++ b/examples/with-composables/package.json @@ -1,12 +1,13 @@ { "name": "example-with-composables", "private": true, - "devDependencies": { - "nuxt3": "latest" - }, "scripts": { - "dev": "nuxi dev", "build": "nuxi build", - "start": "node .output/server/index.mjs" + "dev": "nuxi dev", + "start": "nuxi preview" + }, + "devDependencies": { + "@nuxt/ui": "npm:@nuxt/ui-edge@latest", + "nuxt3": "latest" } } diff --git a/examples/with-layouts/package.json b/examples/with-layouts/package.json index c777d18f68..4bd41fa546 100644 --- a/examples/with-layouts/package.json +++ b/examples/with-layouts/package.json @@ -1,12 +1,13 @@ { "name": "example-with-layouts", "private": true, - "devDependencies": { - "nuxt3": "latest" - }, "scripts": { - "dev": "nuxi dev", "build": "nuxi build", - "start": "node .output/server/index.mjs" + "dev": "nuxi dev", + "start": "nuxi preview" + }, + "devDependencies": { + "@nuxt/ui": "npm:@nuxt/ui-edge@latest", + "nuxt3": "latest" } } diff --git a/examples/with-pages/app.vue b/examples/with-pages/app.vue index 6520666fb2..b14fb678a6 100644 --- a/examples/with-pages/app.vue +++ b/examples/with-pages/app.vue @@ -1,18 +1,32 @@ -