├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github └── workflows │ └── ci.yml ├── .gitignore ├── .npmrc ├── LICENSE ├── README.md ├── lerna.json ├── package.json ├── packages ├── assets │ ├── CHANGELOG.md │ ├── README.md │ ├── icon.png │ ├── icons │ │ ├── MiniGem.svg │ │ ├── book-open-solid 1.svg │ │ ├── discord-brands 1.svg │ │ ├── documentation-color-light.svg │ │ ├── documentation-color.svg │ │ ├── documentation-light.svg │ │ ├── documentation.svg │ │ ├── examples-color-light.svg │ │ ├── examples-color.svg │ │ ├── examples-light.svg │ │ ├── examples.svg │ │ ├── get-started-light.svg │ │ ├── get-started.svg │ │ ├── github-brands 1.svg │ │ ├── logo.svg │ │ ├── modules-color-light.svg │ │ ├── modules-color.svg │ │ ├── modules-light.svg │ │ ├── modules.svg │ │ └── twitter-brands 1.svg │ ├── index.mjs │ └── package.json ├── templates │ ├── CHANGELOG.md │ ├── README.md │ ├── index.html │ ├── lib │ │ ├── dev.ts │ │ ├── prerender.ts │ │ └── render.ts │ ├── package.json │ ├── public │ ├── styles.ts │ ├── templates │ │ ├── error-404 │ │ │ ├── index.html │ │ │ └── messages.json │ │ ├── error-500 │ │ │ ├── index.html │ │ │ └── messages.json │ │ ├── error-dev │ │ │ ├── index.html │ │ │ └── messages.json │ │ ├── loading │ │ │ ├── index.html │ │ │ └── messages.json │ │ ├── messages.json │ │ ├── spa-loading-icon │ │ │ ├── index.html │ │ │ └── messages.json │ │ └── welcome │ │ │ ├── index.html │ │ │ └── messages.json │ ├── test │ │ ├── __snapshots__ │ │ │ └── snapshots.spec.ts.snap │ │ └── snapshots.spec.ts │ ├── uno.config.ts │ └── vite.config.ts └── ui │ └── README.md ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── renovate.json ├── scripts ├── bump-edge.ts └── release-edge.sh ├── tsconfig.json └── vercel.json /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_size = 2 5 | indent_style = space 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@nuxtjs/eslint-config-typescript'], 3 | rules: { 4 | 'vue/require-default-prop': 0, 5 | 'vue/multi-word-component-names': 0, 6 | 'import/no-named-as-default-member': 0, 7 | 'import/no-named-as-default': 0 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | branches: 9 | - main 10 | 11 | jobs: 12 | ci: 13 | runs-on: ubuntu-latest 14 | 15 | steps: 16 | - uses: actions/checkout@v4 17 | - run: corepack enable 18 | - uses: actions/setup-node@v4 19 | with: 20 | node-version: "16" 21 | cache: pnpm 22 | - run: pnpm install 23 | - run: pnpm lint 24 | - run: pnpm test 25 | - run: pnpm build 26 | - name: Release Edge 27 | if: | 28 | github.event_name == 'push' && 29 | !contains(github.event.head_commit.message, '[skip-release]') && 30 | !startsWith(github.event.head_commit.message, 'chore') && 31 | !startsWith(github.event.head_commit.message, 'docs') 32 | run: ./scripts/release-edge.sh 33 | env: 34 | NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}} 35 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | dist 3 | node_modules 4 | *.log* 5 | .nuxt 6 | .output 7 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | strict-peer-dependencies=false 2 | shamefully-hoist=true 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Nuxt Project 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🚧 Repository update 🚧 2 | 3 | Nuxt UI Templates have been moved directly into the core repository for Nuxt. You can find them in https://github.com/nuxt/nuxt/tree/main/packages/ui-templates - please raise new issues, discussions and pull requests there 🙏 4 | 5 |
6 | 7 | # 🎨 Nuxt Assets 8 | 9 | Unified Assets & Templates for [Nuxt](https://github.com/nuxt/nuxt). 10 | 11 | ## 📦 Packages 12 | 13 | 14 | 15 | 16 | 20 | 24 | 25 | 26 |
17 |

UI Templates

18 |

Pre-compiled html templates for internal pages. Demo on templates.ui.nuxtjs.org

19 | 		21 |

UI Assets

22 |

Shared assets and resources.

23 |
27 | 28 | 29 | ## 💻 Development 30 | 31 | - Clone repository 32 | - Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable` (use `npm i -g corepack` for Node.js < 16.10) 33 | - Install dependencies using `pnpm install` 34 | 35 | # License 36 | 37 | [MIT](./LICENSE). 38 | Design resources are published under [CC-BY-ND-4.0](http://creativecommons.org/licenses/by-nd/4.0/). 39 | 40 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "independent", 3 | "npmClient": "pnpm", 4 | "conventionalCommits": true, 5 | "command": { 6 | "publish": { 7 | "npmClient": "npm" 8 | } 9 | }, 10 | "changelog": { 11 | "labels": { 12 | "feat": "New Feature", 13 | "fix": "Bug Fix", 14 | "docs": "Documentation", 15 | "types": "Types", 16 | "perf": "Performance", 17 | "refactor": "Refactor" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nuxt/ui-monorepo", 3 | "private": true, 4 | "version": "0.0.0", 5 | "license": "MIT", 6 | "workspaces": [ 7 | "packages/*" 8 | ], 9 | "scripts": { 10 | "build": "FORCE_COLOR=1 lerna run prepack --stream --no-prefix", 11 | "lint": "eslint --ext .vue,.ts,.mjs,.cjs,.js .", 12 | "test": "vitest run", 13 | "release": "FORCE_COLOR=1 lerna publish -m \"chore: release\"" 14 | }, 15 | "devDependencies": { 16 | "@nuxtjs/eslint-config-typescript": "^12.1.0", 17 | "eslint": "^8.57.0", 18 | "jiti": "^1.21.0", 19 | "lerna": "^8.1.2", 20 | "prettier": "^3.2.5", 21 | "typescript": "^5.4.4", 22 | "vitest": "^1.4.0" 23 | }, 24 | "packageManager": "pnpm@8.15.6" 25 | } 26 | -------------------------------------------------------------------------------- /packages/assets/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [0.2.1](https://github.com/nuxt/assets/compare/@nuxt/ui-assets@0.2.0...@nuxt/ui-assets@0.2.1) (2024-04-02) 7 | 8 | **Note:** Version bump only for package @nuxt/ui-assets 9 | 10 | # [0.2.0](https://github.com/nuxt/ui/compare/@nuxt/ui-assets@0.1.0...@nuxt/ui-assets@0.2.0) (2023-01-06) 11 | 12 | ### Features 13 | 14 | - new design welcome template ([#178](https://github.com/nuxt/ui/issues/178)) ([85ceb30](https://github.com/nuxt/ui/commit/85ceb30301a58094e9ae4a6556e086dec245a3fb)) 15 | 16 | # 0.1.0 (2022-04-19) 17 | 18 | ### Features 19 | 20 | - new templates design ([#81](https://github.com/nuxt/ui/issues/81)) ([830f557](https://github.com/nuxt/ui/commit/830f55741d8ab0099afe1172c8e8e4e4040e3e4a)) 21 | -------------------------------------------------------------------------------- /packages/assets/README.md: -------------------------------------------------------------------------------- 1 | # `@nuxt/ui-assets` 2 | 3 | 4 | 5 | Shared assets and resources. 6 | 7 | # License 8 | 9 | Creative Commons License
Nuxt UI by Nuxt Project is licensed under a Creative Commons Attribution-NoDerivatives 4.0 International License.
Based on a work at https://github.com/nuxt/ui. 10 | -------------------------------------------------------------------------------- /packages/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nuxt/ui-templates/2761bebf00de3b2829bad5b8342443fa8cf2117b/packages/assets/icon.png -------------------------------------------------------------------------------- /packages/assets/icons/MiniGem.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/assets/icons/book-open-solid 1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/assets/icons/discord-brands 1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/assets/icons/documentation-color-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /packages/assets/icons/documentation-color.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /packages/assets/icons/documentation-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /packages/assets/icons/documentation.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /packages/assets/icons/examples-color-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/assets/icons/examples-color.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/assets/icons/examples-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/assets/icons/examples.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/assets/icons/get-started-light.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/assets/icons/get-started.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/assets/icons/github-brands 1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/assets/icons/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/assets/icons/modules-color-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /packages/assets/icons/modules-color.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/assets/icons/modules-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /packages/assets/icons/modules.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/assets/icons/twitter-brands 1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/assets/index.mjs: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nuxt/ui-templates/2761bebf00de3b2829bad5b8342443fa8cf2117b/packages/assets/index.mjs -------------------------------------------------------------------------------- /packages/assets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nuxt/ui-assets", 3 | "version": "0.2.1", 4 | "repository": "nuxt/assets", 5 | "license": "CC-BY-ND-4.0", 6 | "exports": { 7 | ".": "./index.mjs", 8 | "./*": "./*" 9 | }, 10 | "main": "./index.mjs", 11 | "files": [ 12 | "icons", 13 | "images" 14 | ], 15 | "publishConfig": { 16 | "access": "public" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/templates/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [1.3.3](https://github.com/nuxt/assets/compare/@nuxt/ui-templates@1.3.2...@nuxt/ui-templates@1.3.3) (2024-04-05) 7 | 8 | 9 | ### Bug Fixes 10 | 11 | * **templates:** include `.d.mts` declarations ([a40c36b](https://github.com/nuxt/assets/commit/a40c36b973ebc960460fd28db53e1efdc31f552e)) 12 | 13 | 14 | 15 | 16 | 17 | ## [1.3.2](https://github.com/nuxt/assets/compare/@nuxt/ui-templates@1.3.1...@nuxt/ui-templates@1.3.2) (2024-04-02) 18 | 19 | ### Bug Fixes 20 | 21 | - add labels to footer links for accessibility ([#221](https://github.com/nuxt/assets/issues/221)) ([6e6764b](https://github.com/nuxt/assets/commit/6e6764b636e3c77dca88d712b026def4b88e0473)) 22 | - **ui-templates:** give alternative of creating `app.vue` ([#233](https://github.com/nuxt/assets/issues/233)) ([bc8c845](https://github.com/nuxt/assets/commit/bc8c8451d4bd3fff0c5c0b427a087a5a9bca58af)) 23 | 24 | ## [1.3.1](https://github.com/nuxt/ui/compare/@nuxt/ui-templates@1.3.0...@nuxt/ui-templates@1.3.1) (2023-07-29) 25 | 26 | ### Bug Fixes 27 | 28 | - **deps:** revert critters upgrade ([0341634](https://github.com/nuxt/ui/commit/03416341f7664f232da121deebb2fb53ab3dd864)) 29 | 30 | # [1.3.0](https://github.com/nuxt/ui/compare/@nuxt/ui-templates@1.2.1...@nuxt/ui-templates@1.3.0) (2023-07-28) 31 | 32 | ### Features 33 | 34 | - update nuxt logo ([#213](https://github.com/nuxt/ui/issues/213)) ([a8ee040](https://github.com/nuxt/ui/commit/a8ee0408521e5a9b1a2b387a57bece0750a43b03)) 35 | 36 | ## [1.2.1](https://github.com/nuxt/ui/compare/@nuxt/ui-templates@1.2.0...@nuxt/ui-templates@1.2.1) (2023-07-26) 37 | 38 | ### Bug Fixes 39 | 40 | - handle empty message object when generating declaration ([5f229ef](https://github.com/nuxt/ui/commit/5f229ef1a3849ee042fe46e228ecf0094ef564fc)) 41 | 42 | # [1.2.0](https://github.com/nuxt/ui/compare/@nuxt/ui-templates@1.1.1...@nuxt/ui-templates@1.2.0) (2023-06-20) 43 | 44 | ### Bug Fixes 45 | 46 | - **templates:** update the docs link for `app.vue` ([#207](https://github.com/nuxt/ui/issues/207)) ([65b027e](https://github.com/nuxt/ui/commit/65b027ec5a7bec116ff0d694d2491b205c7895cf)) 47 | 48 | ### Features 49 | 50 | - **templates:** add spa-loading-icon ([b3ceabe](https://github.com/nuxt/ui/commit/b3ceabeea80f9e7239d18f331dfe457c65681b3d)) 51 | 52 | ## [1.1.1](https://github.com/nuxt/ui/compare/@nuxt/ui-templates@1.1.0...@nuxt/ui-templates@1.1.1) (2023-01-31) 53 | 54 | **Note:** Version bump only for package @nuxt/ui-templates 55 | 56 | # [1.1.0](https://github.com/nuxt/ui/compare/@nuxt/ui-templates@0.4.0...@nuxt/ui-templates@1.1.0) (2023-01-06) 57 | 58 | ### Bug Fixes 59 | 60 | - **templates:** avoid using blur in no-animation mode, disable animation in Safari ([#175](https://github.com/nuxt/ui/issues/175)) ([e552ec5](https://github.com/nuxt/ui/commit/e552ec53478d1b310f2aac6aac552777d00c16f7)) 61 | - use dynamic copyright year ([#193](https://github.com/nuxt/ui/issues/193)) ([816f361](https://github.com/nuxt/ui/commit/816f3616015cf6cad1568dbdb830f0664bdc5ca5)) 62 | 63 | ### Features 64 | 65 | - new design welcome template ([#178](https://github.com/nuxt/ui/issues/178)) ([85ceb30](https://github.com/nuxt/ui/commit/85ceb30301a58094e9ae4a6556e086dec245a3fb)) 66 | 67 | # [0.4.0](https://github.com/nuxt/ui/compare/@nuxt/ui-templates@0.3.3...@nuxt/ui-templates@0.4.0) (2022-09-20) 68 | 69 | ### Bug Fixes 70 | 71 | - upgrade headers to h1/h2 from h4/h5 ([#165](https://github.com/nuxt/ui/issues/165)) ([a44b945](https://github.com/nuxt/ui/commit/a44b9459e95b0ab2dfcf6b5b0b4493e00f968b3f)) 72 | 73 | ### Features 74 | 75 | - **templates:** ability to disable animation effect in loading page ([#161](https://github.com/nuxt/ui/issues/161)) ([8771e98](https://github.com/nuxt/ui/commit/8771e98fc160e4040e64c7b3982c4ef6f0fcb0d9)) 76 | 77 | ## [0.3.3](https://github.com/nuxt/ui/compare/@nuxt/ui-templates@0.3.2...@nuxt/ui-templates@0.3.3) (2022-09-05) 78 | 79 | ### Bug Fixes 80 | 81 | - **templates:** interpolate props within attrs in rendering vue component ([#157](https://github.com/nuxt/ui/issues/157)) ([c0ea878](https://github.com/nuxt/ui/commit/c0ea87866c026bba4aef12ef108c7fb5992239b4)) 82 | 83 | ## [0.3.2](https://github.com/nuxt/ui/compare/@nuxt/ui-templates@0.3.1...@nuxt/ui-templates@0.3.2) (2022-08-12) 84 | 85 | ### Features 86 | 87 | - **templates:** improve welcome screen luminance effect ([#142](https://github.com/nuxt/ui/issues/142)) ([7f8e554](https://github.com/nuxt/ui/commit/7f8e554c6682be8e11ad4965787dcb5ca92849e0)) 88 | 89 | ## [0.3.1](https://github.com/nuxt/ui/compare/@nuxt/ui-templates@0.3.0...@nuxt/ui-templates@0.3.1) (2022-08-11) 90 | 91 | ### Bug Fixes 92 | 93 | - **templates:** adjust style extraction regexp ([#153](https://github.com/nuxt/ui/issues/153)) ([f19b73c](https://github.com/nuxt/ui/commit/f19b73cfb96fe4a641d441971cd92073287f9892)) 94 | 95 | # [0.3.0](https://github.com/nuxt/ui/compare/@nuxt/ui-templates@0.2.2...@nuxt/ui-templates@0.3.0) (2022-07-21) 96 | 97 | **Note:** Version bump only for package @nuxt/ui-templates 98 | 99 | ## [0.2.2](https://github.com/nuxt/ui/compare/@nuxt/ui-templates@0.2.1...@nuxt/ui-templates@0.2.2) (2022-07-21) 100 | 101 | ### Bug Fixes 102 | 103 | - inline global css that's not at beginning of line ([#141](https://github.com/nuxt/ui/issues/141)) ([adb0eb6](https://github.com/nuxt/ui/commit/adb0eb65ac33c2429e1122a4e24b39e1f83cb849)) 104 | - **templates:** prevent scrollbars from appearing on loading screen ([#144](https://github.com/nuxt/ui/issues/144)) ([fbab1cb](https://github.com/nuxt/ui/commit/fbab1cb5b31dd9658d47f3c91c0fc45861b782fd)) 105 | 106 | ## [0.2.1](https://github.com/nuxt/ui/compare/@nuxt/ui-templates@0.2.0...@nuxt/ui-templates@0.2.1) (2022-07-12) 107 | 108 | **Note:** Version bump only for package @nuxt/ui-templates 109 | 110 | # [0.2.0](https://github.com/nuxt/ui/compare/@nuxt/ui-templates@0.1.1...@nuxt/ui-templates@0.2.0) (2022-07-12) 111 | 112 | ### Bug Fixes 113 | 114 | - **templates:** align twitter text in welcome template ([#120](https://github.com/nuxt/ui/issues/120)) ([52eaf32](https://github.com/nuxt/ui/commit/52eaf322b996f318a52a05d1f58ce5a879bf7187)) 115 | 116 | ### Features 117 | 118 | - **loading-template:** mouse blurred light effect ([#138](https://github.com/nuxt/ui/issues/138)) ([4c28b3f](https://github.com/nuxt/ui/commit/4c28b3f27903969416d4292051e18eef70897f0c)) 119 | 120 | ## [0.1.1](https://github.com/nuxt/ui/compare/@nuxt/ui-templates@0.1.0...@nuxt/ui-templates@0.1.1) (2022-05-07) 121 | 122 | ### Bug Fixes 123 | 124 | - use `v-text` rather than `v-html` ([#100](https://github.com/nuxt/ui/issues/100)) ([9902421](https://github.com/nuxt/ui/commit/99024218aab20a1b326b59d986d632da546df6b4)) 125 | 126 | # 0.1.0 (2022-04-19) 127 | 128 | ### Bug Fixes 129 | 130 | - better gradients ([bc8d393](https://github.com/nuxt/ui/commit/bc8d393129ae80a48372645edeceb377f7dfcc9f)) 131 | - extract inline scripts from template ([042029d](https://github.com/nuxt/ui/commit/042029db138acb7db6796eaf6be13942bbe6cd9f)) 132 | - improve design of error pages ([#68](https://github.com/nuxt/ui/issues/68)) ([9a81dd7](https://github.com/nuxt/ui/commit/9a81dd79ea2ebeb2bd0a29d3828a440a0f5fe741)) 133 | - make style global ([a9d6416](https://github.com/nuxt/ui/commit/a9d641619450822884fd01a7c610ef5e0bd687a8)) 134 | - only convert app links to `` ([01e1920](https://github.com/nuxt/ui/commit/01e1920da25da9a4aadf386cfc715ab1ef2c9a43)) 135 | - **templates:** don't use `v-html` on `` ([f07bad4](https://github.com/nuxt/ui/commit/f07bad487f02b0b63e307daec3280a2a65c5f281)) 136 | - **templates:** fix title and don't use css variables ([c31c699](https://github.com/nuxt/ui/commit/c31c6996ab17b09cecdb91ab9c725146a2d9d0b7)) 137 | - **templates:** generate js templates ([0cb54cc](https://github.com/nuxt/ui/commit/0cb54ccc7ac8d2d97db259c2eab41ac5adf66147)) 138 | - **templates:** hybrid global + scoped styles ([835c29f](https://github.com/nuxt/ui/commit/835c29f4139a2209e720a826e1d35621099f23cd)) 139 | - **templates:** reduce size and fix z-index ([6f72fd1](https://github.com/nuxt/ui/commit/6f72fd1281044b302f4b0c3542afb3672f8fd000)) 140 | - **ui-templates:** switch to `useHead` import ([#89](https://github.com/nuxt/ui/issues/89)) ([0352482](https://github.com/nuxt/ui/commit/0352482727bbb87f190f1d3791f19a58dfce0b36)) 141 | - use vh for height ([790de8f](https://github.com/nuxt/ui/commit/790de8f7f84ee8e63f76db58fcffb73ff0c59ee2)) 142 | - use vh instead and fixed position ([9f119b8](https://github.com/nuxt/ui/commit/9f119b89a529b306cac654999ca00cd5718830f1)) 143 | 144 | ### Features 145 | 146 | - new templates design ([#81](https://github.com/nuxt/ui/issues/81)) ([830f557](https://github.com/nuxt/ui/commit/830f55741d8ab0099afe1172c8e8e4e4040e3e4a)) 147 | - **ui:** enable transformers for unocss ([631d265](https://github.com/nuxt/ui/commit/631d2655f0469286fd17b6ea39dbb0650571b156)) 148 | 149 | # Changelog 150 | 151 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 152 | 153 | ### [0.1.5](https://github.com/nuxt/ui/compare/v0.1.4...v0.1.5) (2021-11-10) 154 | 155 | ### Bug Fixes 156 | 157 | - don't include `const` declaration in `.d.ts` ([#40](https://github.com/nuxt/ui/issues/40)) ([75a5eae](https://github.com/nuxt/ui/commit/75a5eae76b797a9f49e30ec5469056d093a3a302)) 158 | 159 | ### [0.1.4](https://github.com/nuxt/ui/compare/v0.1.3...v0.1.4) (2021-10-20) 160 | 161 | ### Bug Fixes 162 | 163 | - add button background on dark media ([#36](https://github.com/nuxt/ui/issues/36)) ([de0a759](https://github.com/nuxt/ui/commit/de0a75959d06e90239b5a203eeb9e9be6031f0c2)) 164 | - add missing `rel="noopener` on some links([#34](https://github.com/nuxt/ui/issues/34)) ([8f18183](https://github.com/nuxt/ui/commit/8f18183f1d6cca49753e3b0a6a1da0aa8e0c9c83)) 165 | 166 | ### [0.1.3](https://github.com/nuxt/ui/compare/v0.1.2...v0.1.3) (2021-10-12) 167 | 168 | ### Bug Fixes 169 | 170 | - updates colors and templates ([e5691b0](https://github.com/nuxt/ui/commit/e5691b049b684ae98a04c5a324679d0b1f34053b)) 171 | 172 | ### [0.1.2](https://github.com/nuxt/ui/compare/v0.1.0...v0.1.2) (2021-10-12) 173 | 174 | ### Features 175 | 176 | - add welcome page template ([d7f95db](https://github.com/nuxt/ui/commit/d7f95db8c3344a2a05f91fb332f0f5ab1908b780)) 177 | 178 | ### Bug Fixes 179 | 180 | - add rootdir to vite fs.allow ([02da788](https://github.com/nuxt/ui/commit/02da78871564c5128b435694daa62c02b3acbef0)) 181 | 182 | ### [0.1.1](https://github.com/nuxt/ui/compare/v0.1.0...v0.1.1) (2021-10-07) 183 | 184 | ## [0.1.0](https://github.com/nuxt/ui/compare/v0.0.6...v0.1.0) (2021-09-23) 185 | 186 | ### [0.0.6](https://github.com/nuxt/ui/compare/v0.0.5...v0.0.6) (2021-09-23) 187 | 188 | ### [0.0.5](https://github.com/nuxt/ui/compare/v0.0.3...v0.0.5) (2021-07-20) 189 | 190 | ### Bug Fixes 191 | 192 | - correct color for the logo in dark mode ([408e6aa](https://github.com/nuxt/ui/commit/408e6aa22c0ba4920dadfa4f2eae9391d2862111)) 193 | 194 | ### [0.0.4](https://github.com/nuxt/ui/compare/v0.0.3...v0.0.4) (2021-07-14) 195 | 196 | ### [0.0.3](https://github.com/nuxt/ui/compare/v0.0.2...v0.0.3) (2021-07-14) 197 | 198 | ### Bug Fixes 199 | 200 | - use statusCode not message for 500 dev ([#19](https://github.com/nuxt/ui/issues/19)) ([a910883](https://github.com/nuxt/ui/commit/a910883024b2280770cbe985092153666eb17790)) 201 | 202 | ### 0.0.2 (2021-07-14) 203 | 204 | ### Features 205 | 206 | - add prerender script to preview ([4721560](https://github.com/nuxt/ui/commit/4721560e969ce52d29107546aae2fef9a6e6224f)) 207 | - loading page ([#18](https://github.com/nuxt/ui/issues/18)) ([78799fb](https://github.com/nuxt/ui/commit/78799fb695a896f6a992f28225b99283a38503ff)) 208 | - update new structure (closes [#14](https://github.com/nuxt/ui/issues/14)) ([631c740](https://github.com/nuxt/ui/commit/631c740396736e124c3cea288c0bcc22545d4269)) 209 | 210 | ### Bug Fixes 211 | 212 | - fix prerender and strict context ([ae26e1f](https://github.com/nuxt/ui/commit/ae26e1f21e85155595cfd861d20cddeff858ad5f)) 213 | -------------------------------------------------------------------------------- /packages/templates/README.md: -------------------------------------------------------------------------------- 1 | # `@nuxt/ui-templates` 2 | 3 | 4 | 5 | Pre-compiled html templates for internal pages. 6 | 7 | 🏀 [Online Playground](https://templates.ui.nuxtjs.org) 8 | 9 | # License 10 | 11 | Creative Commons License
Nuxt UI by Nuxt Project is licensed under a Creative Commons Attribution-NoDerivatives 4.0 International License.
Based on a work at https://github.com/nuxt/ui. 12 | -------------------------------------------------------------------------------- /packages/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Nuxt Templates

10 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/templates/lib/dev.ts: -------------------------------------------------------------------------------- 1 | import { resolve, join } from 'path' 2 | import { promises as fsp } from 'fs' 3 | import type { Plugin } from 'vite' 4 | import template from 'lodash.template' 5 | import genericMessages from '../templates/messages.json' 6 | 7 | const r = (...path: string[]) => resolve(join(__dirname, '..', ...path)) 8 | 9 | export const DevRenderingPlugin = () => { 10 | return { 11 | name: 'dev-rendering', 12 | async transformIndexHtml (html: string, context) { 13 | const page = context.originalUrl || '/' 14 | 15 | if (page === '/') { 16 | const templateNames = await fsp.readdir(r('templates')) 17 | const serializedData = JSON.stringify({ templateNames }) 18 | return html.replace('{{ data }}', serializedData) 19 | } 20 | 21 | const contents = await fsp.readFile(r(page, 'index.html'), 'utf-8') 22 | 23 | const messages = JSON.parse(await fsp.readFile(r(page, 'messages.json'), 'utf-8')) 24 | 25 | return template(contents, { 26 | interpolate: /{{{?([\s\S]+?)}?}}/g 27 | })({ 28 | messages: { ...genericMessages, ...messages } 29 | }) 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/templates/lib/prerender.ts: -------------------------------------------------------------------------------- 1 | import { resolve, join } from 'path' 2 | import { promises as fsp } from 'fs' 3 | import { globby } from 'globby' 4 | 5 | const r = (...path: string[]) => resolve(join(__dirname, '..', ...path)) 6 | 7 | async function main () { 8 | const templates = await globby(r('dist/templates/*.mjs')) 9 | for (const file of templates) { 10 | const { template } = await import(file) 11 | const updated = template({ 12 | // messages: {}, 13 | name: '{{ name }}' // TODO 14 | }) 15 | await fsp.mkdir(file.replace('.mjs', '')) 16 | await fsp.writeFile(file.replace('.mjs', '/index.html'), updated) 17 | } 18 | } 19 | 20 | // eslint-disable-next-line no-console 21 | main().catch(console.error) 22 | -------------------------------------------------------------------------------- /packages/templates/lib/render.ts: -------------------------------------------------------------------------------- 1 | import { promises as fsp } from 'fs' 2 | import { resolve, join, dirname, basename } from 'upath' 3 | import type { Plugin } from 'vite' 4 | import Critters from 'critters' 5 | import template from 'lodash.template' 6 | import { genObjectFromRawEntries } from 'knitwork' 7 | import htmlMinifier from 'html-minifier' 8 | import { camelCase } from 'scule' 9 | import genericMessages from '../templates/messages.json' 10 | 11 | const r = (...path: string[]) => resolve(join(__dirname, '..', ...path)) 12 | 13 | const replaceAll = (input, search, replace) => input.split(search).join(replace) 14 | 15 | export const RenderPlugin = () => { 16 | return { 17 | name: 'render', 18 | enforce: 'post', 19 | async writeBundle () { 20 | const distDir = r('dist') 21 | const critters = new Critters({ path: distDir }) 22 | const globby = await import('globby').then(r => r.globby) 23 | const htmlFiles = await globby(r('dist/templates/**/*.html')) 24 | 25 | const templateExports = [] 26 | 27 | for (const fileName of htmlFiles) { 28 | // Infer template name 29 | const templateName = basename(dirname(fileName)) 30 | 31 | // eslint-disable-next-line no-console 32 | console.log('Processing', templateName) 33 | 34 | // Read source template 35 | let html = await fsp.readFile(fileName, 'utf-8') 36 | const isCompleteHTML = html.includes('') 37 | 38 | if (html.includes(']*>/g, '') 44 | 45 | // Inline SVGs 46 | const svgSources = Array.from(html.matchAll(/src="([^"]+)"|url([^)]+)/g)) 47 | .map(m => m[1]) 48 | .filter(src => src?.match(/\.svg$/)) 49 | 50 | for (const src of svgSources) { 51 | const svg = await fsp.readFile(r('dist', src), 'utf-8') 52 | const base64Source = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}` 53 | html = replaceAll(html, src, base64Source) 54 | } 55 | 56 | // Inline our scripts 57 | const scriptSources = Array.from(html.matchAll(/]*src="(.*)"[^>]*>[\s\S]*?<\/script>/g)) 58 | .filter(([_block, src]) => src?.match(/^\/.*\.js$/)) 59 | 60 | for (const [scriptBlock, src] of scriptSources) { 61 | let contents = await fsp.readFile(r('dist', src), 'utf-8') 62 | contents = replaceAll(contents, '/* empty css */', '').trim() 63 | html = html.replace(scriptBlock, contents.length ? `` : '') 64 | } 65 | 66 | // Minify HTML 67 | html = htmlMinifier.minify(html, { collapseWhitespace: true }) 68 | 69 | if (!isCompleteHTML) { 70 | html = html.replace('', '') 71 | html = html.replace('', '') 72 | } 73 | 74 | // Load messages 75 | const messages = JSON.parse(await fsp.readFile(r(`templates/${templateName}/messages.json`), 'utf-8')) 76 | 77 | // Serialize into a js function 78 | const jsCode = [ 79 | `const _messages = ${JSON.stringify({ ...genericMessages, ...messages })}`, 80 | `const _render = ${template(html, { variable: '__var__', interpolate: /{{{?([\s\S]+?)}?}}/g }).toString().replace('__var__', '{ messages }')}`, 81 | 'const _template = (messages) => _render({ messages: { ..._messages, ...messages } })' 82 | ].join('\n').trim() 83 | 84 | const templateContent = html 85 | .match(/([\s\S]*)<\/body>/)?.[0] 86 | .replace(/(?<=<|<\/)body/g, 'div') 87 | .replace(/messages\./g, '') 88 | .replace(/]*>([\s\S]*?)<\/script>/g, '') 89 | .replace(/]*)>([\s\S]*)<\/a>/g, '\n$3\n') 90 | // eslint-disable-next-line no-template-curly-in-string 91 | .replace(/<([^>]+) ([a-z]+)="([^"]*)({{\s*(\w+?)\s*}})([^"]*)"([^>]*)>/g, '<$1 :$2="`$3${$5}$6`"$7>') 92 | .replace(/>{{\s*(\w+?)\s*}}<\/[\w-]*>/g, ' v-text="$1" />') 93 | .replace(/>{{{\s*(\w+?)\s*}}}<\/[\w-]*>/g, ' v-html="$1" />') 94 | // We are not matching ', 124 | '', 127 | '' 130 | ].filter(Boolean).join('\n').trim() 131 | 132 | // Generate types 133 | const types = [ 134 | `export type DefaultMessages = Record<${Object.keys(messages).map(a => `"${a}"`).join(' | ') || 'string'}, string | boolean | number >`, 135 | 'declare const template: (data: Partial) => string', 136 | 'export { template }' 137 | ].join('\n') 138 | 139 | // Register exports 140 | templateExports.push({ 141 | exportName: camelCase(templateName), 142 | templateName, 143 | types 144 | }) 145 | 146 | // Write new template 147 | await fsp.writeFile(fileName.replace('/index.html', '.mjs'), `${jsCode}\nexport const template = _template`) 148 | await fsp.writeFile(fileName.replace('/index.html', '.vue'), vueCode) 149 | await fsp.writeFile(fileName.replace('/index.html', '.d.mts'), `${types}`) 150 | await fsp.writeFile(fileName.replace('/index.html', '.d.ts'), `${types}`) 151 | 152 | // Remove original html file 153 | await fsp.unlink(fileName) 154 | await fsp.rmdir(dirname(fileName)) 155 | } 156 | 157 | // Write an index file with named exports for each template 158 | const contents = templateExports.map(exp => `export { template as ${exp.exportName} } from './templates/${exp.templateName}.mjs'`).join('\n') 159 | await fsp.writeFile(r('dist/index.mjs'), contents, 'utf8') 160 | 161 | await fsp.writeFile(r('dist/index.d.ts'), replaceAll(contents, /\.mjs/g, ''), 'utf8') 162 | await fsp.writeFile(r('dist/index.d.mts'), replaceAll(contents, /\.mjs/g, ''), 'utf8') 163 | } 164 | } 165 | } 166 | -------------------------------------------------------------------------------- /packages/templates/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nuxt/ui-templates", 3 | "version": "1.3.3", 4 | "repository": "nuxt/assets", 5 | "license": "CC-BY-ND-4.0", 6 | "exports": { 7 | "./templates/*": "./dist/templates/*", 8 | ".": "./dist/index.mjs", 9 | "./*": "./dist/*" 10 | }, 11 | "main": "./dist/index.mjs", 12 | "types": "./dist/index.d.ts", 13 | "files": [ 14 | "dist/templates/*", 15 | "dist/index.*" 16 | ], 17 | "scripts": { 18 | "build": "vite build", 19 | "dev": "vite", 20 | "lint": "eslint --ext .ts,.js .", 21 | "optimize-assets": "npx svgo public/assets/**/*.svg", 22 | "prepack": "pnpm build", 23 | "prerender": "pnpm build && jiti ./lib/prerender", 24 | "test": "pnpm lint && pnpm build" 25 | }, 26 | "devDependencies": { 27 | "@nuxt/ui-assets": "^0.2.1", 28 | "@types/html-minifier": "^4.0.5", 29 | "@types/lodash.template": "^4.5.3", 30 | "@unocss/reset": "^0.58.9", 31 | "critters": "0.0.22", 32 | "execa": "^8.0.1", 33 | "globby": "^14.0.1", 34 | "html-minifier": "^4.0.0", 35 | "jiti": "^1.21.0", 36 | "knitwork": "^1.1.0", 37 | "lodash.template": "^4.5.0", 38 | "scule": "^1.3.0", 39 | "unocss": "^0.58.9", 40 | "upath": "^2.0.1", 41 | "vite": "^5.2.8" 42 | }, 43 | "publishConfig": { 44 | "access": "public" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /packages/templates/public: -------------------------------------------------------------------------------- 1 | ../assets -------------------------------------------------------------------------------- /packages/templates/styles.ts: -------------------------------------------------------------------------------- 1 | import '@unocss/reset/tailwind.css' 2 | import 'uno.css' 3 | -------------------------------------------------------------------------------- /packages/templates/templates/error-404/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ messages.statusCode }} - {{ messages.statusMessage }} | {{ messages.appName }} 5 | 6 | 7 | 8 | 64 | 65 | 66 |
67 |
68 |

{{ messages.statusCode }}

69 |

{{ messages.description }}

70 |
71 | 72 | {{ messages.backHome }} 73 | 74 |
75 |
76 | 77 | 78 | -------------------------------------------------------------------------------- /packages/templates/templates/error-404/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "statusCode": 404, 3 | "statusMessage": "Not Found", 4 | "description": "Sorry, the page you are looking for could not be found.", 5 | "backHome": "Go back home" 6 | } 7 | -------------------------------------------------------------------------------- /packages/templates/templates/error-500/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ messages.statusCode }} - {{ messages.statusMessage }} | {{ messages.appName }} 5 | 6 | 7 | 8 | 14 | 15 | 16 |
17 |
18 |

{{ messages.statusCode }}

19 |

{{ messages.description }}

20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /packages/templates/templates/error-500/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "statusCode": 500, 3 | "statusMessage": "Server error", 4 | "description": "This page is temporarily unavailable." 5 | } 6 | -------------------------------------------------------------------------------- /packages/templates/templates/error-dev/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ messages.statusCode }} - {{ messages.statusMessage }} | {{ messages.appName }} 5 | 6 | 7 | 8 | 17 | 18 | 19 |
20 |

{{ messages.statusCode }}

21 |

{{ messages.description }}

22 |
23 | 
{{{ messages.stack }}}
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /packages/templates/templates/error-dev/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "statusCode": 500, 3 | "statusMessage": "Server error", 4 | "description": "An error occurred in the application and the page could not be served. If you are the application owner, check your server logs for details.", 5 | "stack": "" 6 | } 7 | -------------------------------------------------------------------------------- /packages/templates/templates/loading/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ messages.loading }} | {{ messages.appName }} 5 | 6 | 7 | 8 | 75 | 76 | 77 |
78 | 84 | 85 |
86 | 187 | 188 | 189 | -------------------------------------------------------------------------------- /packages/templates/templates/loading/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "loading": "Loading" 3 | } 4 | -------------------------------------------------------------------------------- /packages/templates/templates/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "appName": "Nuxt", 3 | "version": "" 4 | } 5 | -------------------------------------------------------------------------------- /packages/templates/templates/spa-loading-icon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 30 | -------------------------------------------------------------------------------- /packages/templates/templates/spa-loading-icon/messages.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /packages/templates/templates/welcome/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ messages.title }} 5 | 6 | 7 | 8 | 9 | 220 | 221 | 222 |
223 |
224 | 225 | 226 | 227 | 228 | 229 |

230 | Welcome to Nuxt! 231 |

232 |
233 |
234 |
235 |
236 |
237 |
238 | 239 | 240 |
241 |
242 |

243 | Get started 244 |

245 |

Remove this welcome page by 246 | replacing <NuxtWelcome /> in app.vue with your own code, or creating your own app.vue if it doesn't exist.

247 |
248 |
249 |
250 |
251 |
252 | 253 | modules icon 254 | modules icon 255 | modules icon 256 | modules icon 257 |
258 |

259 | Modules 260 |

261 |

262 | Discover our list of modules to supercharge your Nuxt project. Created by the Nuxt team and community. 263 |

264 |
265 | 266 |
267 |
268 |
269 | 270 |
271 |
272 |

273 | Documentation 274 |

275 |

276 | We highly recommend you take a look at the Nuxt documentation to level up. 277 |

278 |
279 | documentation icon 280 | documentation icon 281 | documentation icon 282 | documentation icon 283 |
284 | 285 |
286 |
287 |
288 |
289 | 290 | examples icon 291 | examples icon 292 | examples icon 293 | examples icon 294 |
295 |

296 | Examples 297 |

298 |

299 | Explore different way of using Nuxt features and get inspired with our list of examples. 300 |

301 |
302 | 303 |
304 |
305 |
306 | 365 | 366 | 367 | -------------------------------------------------------------------------------- /packages/templates/templates/welcome/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Welcome to Nuxt!", 3 | "readDocs": "We highly recommend you take a look at the Nuxt documentation, whether you are new or have previous experience with the framework.", 4 | "followTwitter": "Follow the Nuxt Twitter account to get latest news about releases, new modules, tutorials and tips.", 5 | "starGitHub": "Nuxt is open source and the code is available on GitHub, feel free to star it, participate in discussions or dive into the source." 6 | } 7 | -------------------------------------------------------------------------------- /packages/templates/test/__snapshots__/snapshots.spec.ts.snap: -------------------------------------------------------------------------------- 1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html 2 | 3 | exports[`template > correctly outputs style blocks for error-404.vue 1`] = ` 4 | ".spotlight { 5 | background: linear-gradient(45deg, #00dc82 0%, #36e4da 50%, #0047e1 100%); 6 | filter: blur(20vh); 7 | height: 40vh; 8 | bottom: -30vh; 9 | } 10 | .gradient-border { 11 | position: relative; 12 | border-radius: 0.5rem; 13 | -webkit-backdrop-filter: blur(10px); 14 | backdrop-filter: blur(10px); 15 | } 16 | @media (prefers-color-scheme: light) { 17 | .gradient-border { 18 | background-color: rgba(255, 255, 255, 0.3); 19 | } 20 | .gradient-border::before { 21 | background: linear-gradient( 22 | 90deg, 23 | #e2e2e2 0%, 24 | #e2e2e2 25%, 25 | #00dc82 50%, 26 | #36e4da 75%, 27 | #0047e1 100% 28 | ); 29 | } 30 | } 31 | @media (prefers-color-scheme: dark) { 32 | .gradient-border { 33 | background-color: rgba(20, 20, 20, 0.3); 34 | } 35 | .gradient-border::before { 36 | background: linear-gradient( 37 | 90deg, 38 | #303030 0%, 39 | #303030 25%, 40 | #00dc82 50%, 41 | #36e4da 75%, 42 | #0047e1 100% 43 | ); 44 | } 45 | } 46 | .gradient-border::before { 47 | content: ""; 48 | position: absolute; 49 | top: 0; 50 | left: 0; 51 | right: 0; 52 | bottom: 0; 53 | border-radius: 0.5rem; 54 | padding: 2px; 55 | width: 100%; 56 | background-size: 400% auto; 57 | opacity: 0.5; 58 | transition: 59 | background-position 0.3s ease-in-out, 60 | opacity 0.2s ease-in-out; 61 | -webkit-mask: 62 | linear-gradient(#fff 0 0) content-box, 63 | linear-gradient(#fff 0 0); 64 | mask: 65 | linear-gradient(#fff 0 0) content-box, 66 | linear-gradient(#fff 0 0); 67 | -webkit-mask-composite: xor; 68 | mask-composite: exclude; 69 | } 70 | .gradient-border:hover::before { 71 | background-position: -50% 0; 72 | opacity: 1; 73 | } 74 | .fixed { 75 | position: fixed; 76 | } 77 | .left-0 { 78 | left: 0; 79 | } 80 | .right-0 { 81 | right: 0; 82 | } 83 | .z-10 { 84 | z-index: 10; 85 | } 86 | .z-20 { 87 | z-index: 20; 88 | } 89 | .grid { 90 | display: grid; 91 | } 92 | .mb-16 { 93 | margin-bottom: 4rem; 94 | } 95 | .mb-8 { 96 | margin-bottom: 2rem; 97 | } 98 | .max-w-520px { 99 | max-width: 520px; 100 | } 101 | .min-h-screen { 102 | min-height: 100vh; 103 | } 104 | .w-full { 105 | width: 100%; 106 | } 107 | .flex { 108 | display: flex; 109 | } 110 | .cursor-pointer { 111 | cursor: pointer; 112 | } 113 | .place-content-center { 114 | place-content: center; 115 | } 116 | .items-center { 117 | align-items: center; 118 | } 119 | .justify-center { 120 | justify-content: center; 121 | } 122 | .overflow-hidden { 123 | overflow: hidden; 124 | } 125 | .bg-white { 126 | --un-bg-opacity: 1; 127 | background-color: rgb(255 255 255 / var(--un-bg-opacity)); 128 | } 129 | .px-4 { 130 | padding-left: 1rem; 131 | padding-right: 1rem; 132 | } 133 | .px-8 { 134 | padding-left: 2rem; 135 | padding-right: 2rem; 136 | } 137 | .py-2 { 138 | padding-top: 0.5rem; 139 | padding-bottom: 0.5rem; 140 | } 141 | .text-center { 142 | text-align: center; 143 | } 144 | .text-8xl { 145 | font-size: 6rem; 146 | line-height: 1; 147 | } 148 | .text-xl { 149 | font-size: 1.25rem; 150 | line-height: 1.75rem; 151 | } 152 | .text-black { 153 | --un-text-opacity: 1; 154 | color: rgb(0 0 0 / var(--un-text-opacity)); 155 | } 156 | .font-light { 157 | font-weight: 300; 158 | } 159 | .font-medium { 160 | font-weight: 500; 161 | } 162 | .leading-tight { 163 | line-height: 1.25; 164 | } 165 | .font-sans { 166 | font-family: 167 | ui-sans-serif, 168 | system-ui, 169 | -apple-system, 170 | BlinkMacSystemFont, 171 | Segoe UI, 172 | Roboto, 173 | Helvetica Neue, 174 | Arial, 175 | Noto Sans, 176 | sans-serif, 177 | "Apple Color Emoji", 178 | "Segoe UI Emoji", 179 | Segoe UI Symbol, 180 | "Noto Color Emoji"; 181 | } 182 | .antialiased { 183 | -webkit-font-smoothing: antialiased; 184 | -moz-osx-font-smoothing: grayscale; 185 | } 186 | @media (prefers-color-scheme: dark) { 187 | .dark\\:bg-black { 188 | --un-bg-opacity: 1; 189 | background-color: rgb(0 0 0 / var(--un-bg-opacity)); 190 | } 191 | .dark\\:text-white { 192 | --un-text-opacity: 1; 193 | color: rgb(255 255 255 / var(--un-text-opacity)); 194 | } 195 | } 196 | @media (min-width: 640px) { 197 | .sm\\:px-0 { 198 | padding-left: 0; 199 | padding-right: 0; 200 | } 201 | .sm\\:px-6 { 202 | padding-left: 1.5rem; 203 | padding-right: 1.5rem; 204 | } 205 | .sm\\:py-3 { 206 | padding-top: 0.75rem; 207 | padding-bottom: 0.75rem; 208 | } 209 | .sm\\:text-4xl { 210 | font-size: 2.25rem; 211 | line-height: 2.5rem; 212 | } 213 | .sm\\:text-xl { 214 | font-size: 1.25rem; 215 | line-height: 1.75rem; 216 | } 217 | } 218 | " 219 | `; 220 | 221 | exports[`template > correctly outputs style blocks for error-404.vue 2`] = ` 222 | "*, 223 | :before, 224 | :after { 225 | box-sizing: border-box; 226 | border-width: 0; 227 | border-style: solid; 228 | border-color: var(--un-default-border-color, #e5e7eb); 229 | } 230 | :before, 231 | :after { 232 | --un-content: ""; 233 | } 234 | html { 235 | line-height: 1.5; 236 | -webkit-text-size-adjust: 100%; 237 | -moz-tab-size: 4; 238 | tab-size: 4; 239 | font-family: 240 | ui-sans-serif, 241 | system-ui, 242 | sans-serif, 243 | "Apple Color Emoji", 244 | "Segoe UI Emoji", 245 | Segoe UI Symbol, 246 | "Noto Color Emoji"; 247 | font-feature-settings: normal; 248 | font-variation-settings: normal; 249 | -webkit-tap-highlight-color: transparent; 250 | } 251 | body { 252 | margin: 0; 253 | line-height: inherit; 254 | } 255 | h1 { 256 | font-size: inherit; 257 | font-weight: inherit; 258 | } 259 | a { 260 | color: inherit; 261 | text-decoration: inherit; 262 | } 263 | h1, 264 | p { 265 | margin: 0; 266 | } 267 | *, 268 | :before, 269 | :after { 270 | --un-rotate: 0; 271 | --un-rotate-x: 0; 272 | --un-rotate-y: 0; 273 | --un-rotate-z: 0; 274 | --un-scale-x: 1; 275 | --un-scale-y: 1; 276 | --un-scale-z: 1; 277 | --un-skew-x: 0; 278 | --un-skew-y: 0; 279 | --un-translate-x: 0; 280 | --un-translate-y: 0; 281 | --un-translate-z: 0; 282 | --un-pan-x: ; 283 | --un-pan-y: ; 284 | --un-pinch-zoom: ; 285 | --un-scroll-snap-strictness: proximity; 286 | --un-ordinal: ; 287 | --un-slashed-zero: ; 288 | --un-numeric-figure: ; 289 | --un-numeric-spacing: ; 290 | --un-numeric-fraction: ; 291 | --un-border-spacing-x: 0; 292 | --un-border-spacing-y: 0; 293 | --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); 294 | --un-ring-shadow: 0 0 rgb(0 0 0 / 0); 295 | --un-shadow-inset: ; 296 | --un-shadow: 0 0 rgb(0 0 0 / 0); 297 | --un-ring-inset: ; 298 | --un-ring-offset-width: 0px; 299 | --un-ring-offset-color: #fff; 300 | --un-ring-width: 0px; 301 | --un-ring-color: rgb(147 197 253 / 0.5); 302 | --un-blur: ; 303 | --un-brightness: ; 304 | --un-contrast: ; 305 | --un-drop-shadow: ; 306 | --un-grayscale: ; 307 | --un-hue-rotate: ; 308 | --un-invert: ; 309 | --un-saturate: ; 310 | --un-sepia: ; 311 | --un-backdrop-blur: ; 312 | --un-backdrop-brightness: ; 313 | --un-backdrop-contrast: ; 314 | --un-backdrop-grayscale: ; 315 | --un-backdrop-hue-rotate: ; 316 | --un-backdrop-invert: ; 317 | --un-backdrop-opacity: ; 318 | --un-backdrop-saturate: ; 319 | --un-backdrop-sepia: ; 320 | } 321 | " 322 | `; 323 | 324 | exports[`template > correctly outputs style blocks for error-500.vue 1`] = ` 325 | ".spotlight { 326 | background: linear-gradient(45deg, #00dc82 0%, #36e4da 50%, #0047e1 100%); 327 | filter: blur(20vh); 328 | } 329 | .fixed { 330 | position: fixed; 331 | } 332 | .-bottom-1\\/2 { 333 | bottom: -50%; 334 | } 335 | .left-0 { 336 | left: 0; 337 | } 338 | .right-0 { 339 | right: 0; 340 | } 341 | .grid { 342 | display: grid; 343 | } 344 | .mb-16 { 345 | margin-bottom: 4rem; 346 | } 347 | .mb-8 { 348 | margin-bottom: 2rem; 349 | } 350 | .h-1\\/2 { 351 | height: 50%; 352 | } 353 | .max-w-520px { 354 | max-width: 520px; 355 | } 356 | .min-h-screen { 357 | min-height: 100vh; 358 | } 359 | .place-content-center { 360 | place-content: center; 361 | } 362 | .overflow-hidden { 363 | overflow: hidden; 364 | } 365 | .bg-white { 366 | --un-bg-opacity: 1; 367 | background-color: rgb(255 255 255 / var(--un-bg-opacity)); 368 | } 369 | .px-8 { 370 | padding-left: 2rem; 371 | padding-right: 2rem; 372 | } 373 | .text-center { 374 | text-align: center; 375 | } 376 | .text-8xl { 377 | font-size: 6rem; 378 | line-height: 1; 379 | } 380 | .text-xl { 381 | font-size: 1.25rem; 382 | line-height: 1.75rem; 383 | } 384 | .text-black { 385 | --un-text-opacity: 1; 386 | color: rgb(0 0 0 / var(--un-text-opacity)); 387 | } 388 | .font-light { 389 | font-weight: 300; 390 | } 391 | .font-medium { 392 | font-weight: 500; 393 | } 394 | .leading-tight { 395 | line-height: 1.25; 396 | } 397 | .font-sans { 398 | font-family: 399 | ui-sans-serif, 400 | system-ui, 401 | -apple-system, 402 | BlinkMacSystemFont, 403 | Segoe UI, 404 | Roboto, 405 | Helvetica Neue, 406 | Arial, 407 | Noto Sans, 408 | sans-serif, 409 | "Apple Color Emoji", 410 | "Segoe UI Emoji", 411 | Segoe UI Symbol, 412 | "Noto Color Emoji"; 413 | } 414 | .antialiased { 415 | -webkit-font-smoothing: antialiased; 416 | -moz-osx-font-smoothing: grayscale; 417 | } 418 | @media (prefers-color-scheme: dark) { 419 | .dark\\:bg-black { 420 | --un-bg-opacity: 1; 421 | background-color: rgb(0 0 0 / var(--un-bg-opacity)); 422 | } 423 | .dark\\:text-white { 424 | --un-text-opacity: 1; 425 | color: rgb(255 255 255 / var(--un-text-opacity)); 426 | } 427 | } 428 | @media (min-width: 640px) { 429 | .sm\\:px-0 { 430 | padding-left: 0; 431 | padding-right: 0; 432 | } 433 | .sm\\:text-4xl { 434 | font-size: 2.25rem; 435 | line-height: 2.5rem; 436 | } 437 | } 438 | " 439 | `; 440 | 441 | exports[`template > correctly outputs style blocks for error-500.vue 2`] = ` 442 | "*, 443 | :before, 444 | :after { 445 | box-sizing: border-box; 446 | border-width: 0; 447 | border-style: solid; 448 | border-color: var(--un-default-border-color, #e5e7eb); 449 | } 450 | :before, 451 | :after { 452 | --un-content: ""; 453 | } 454 | html { 455 | line-height: 1.5; 456 | -webkit-text-size-adjust: 100%; 457 | -moz-tab-size: 4; 458 | tab-size: 4; 459 | font-family: 460 | ui-sans-serif, 461 | system-ui, 462 | sans-serif, 463 | "Apple Color Emoji", 464 | "Segoe UI Emoji", 465 | Segoe UI Symbol, 466 | "Noto Color Emoji"; 467 | font-feature-settings: normal; 468 | font-variation-settings: normal; 469 | -webkit-tap-highlight-color: transparent; 470 | } 471 | body { 472 | margin: 0; 473 | line-height: inherit; 474 | } 475 | h1 { 476 | font-size: inherit; 477 | font-weight: inherit; 478 | } 479 | h1, 480 | p { 481 | margin: 0; 482 | } 483 | *, 484 | :before, 485 | :after { 486 | --un-rotate: 0; 487 | --un-rotate-x: 0; 488 | --un-rotate-y: 0; 489 | --un-rotate-z: 0; 490 | --un-scale-x: 1; 491 | --un-scale-y: 1; 492 | --un-scale-z: 1; 493 | --un-skew-x: 0; 494 | --un-skew-y: 0; 495 | --un-translate-x: 0; 496 | --un-translate-y: 0; 497 | --un-translate-z: 0; 498 | --un-pan-x: ; 499 | --un-pan-y: ; 500 | --un-pinch-zoom: ; 501 | --un-scroll-snap-strictness: proximity; 502 | --un-ordinal: ; 503 | --un-slashed-zero: ; 504 | --un-numeric-figure: ; 505 | --un-numeric-spacing: ; 506 | --un-numeric-fraction: ; 507 | --un-border-spacing-x: 0; 508 | --un-border-spacing-y: 0; 509 | --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); 510 | --un-ring-shadow: 0 0 rgb(0 0 0 / 0); 511 | --un-shadow-inset: ; 512 | --un-shadow: 0 0 rgb(0 0 0 / 0); 513 | --un-ring-inset: ; 514 | --un-ring-offset-width: 0px; 515 | --un-ring-offset-color: #fff; 516 | --un-ring-width: 0px; 517 | --un-ring-color: rgb(147 197 253 / 0.5); 518 | --un-blur: ; 519 | --un-brightness: ; 520 | --un-contrast: ; 521 | --un-drop-shadow: ; 522 | --un-grayscale: ; 523 | --un-hue-rotate: ; 524 | --un-invert: ; 525 | --un-saturate: ; 526 | --un-sepia: ; 527 | --un-backdrop-blur: ; 528 | --un-backdrop-brightness: ; 529 | --un-backdrop-contrast: ; 530 | --un-backdrop-grayscale: ; 531 | --un-backdrop-hue-rotate: ; 532 | --un-backdrop-invert: ; 533 | --un-backdrop-opacity: ; 534 | --un-backdrop-saturate: ; 535 | --un-backdrop-sepia: ; 536 | } 537 | " 538 | `; 539 | 540 | exports[`template > correctly outputs style blocks for error-dev.vue 1`] = ` 541 | ".spotlight { 542 | background: linear-gradient(45deg, #00dc82 0%, #36e4da 50%, #0047e1 100%); 543 | opacity: 0.8; 544 | filter: blur(30vh); 545 | height: 60vh; 546 | bottom: -40vh; 547 | } 548 | .fixed { 549 | position: fixed; 550 | } 551 | .left-0 { 552 | left: 0; 553 | } 554 | .right-0 { 555 | right: 0; 556 | } 557 | .z-10 { 558 | z-index: 10; 559 | } 560 | .mb-6 { 561 | margin-bottom: 1.5rem; 562 | } 563 | .mb-8 { 564 | margin-bottom: 2rem; 565 | } 566 | .h-auto { 567 | height: auto; 568 | } 569 | .min-h-screen { 570 | min-height: 100vh; 571 | } 572 | .flex { 573 | display: flex; 574 | } 575 | .flex-1 { 576 | flex: 1 1 0%; 577 | } 578 | .flex-col { 579 | flex-direction: column; 580 | } 581 | .overflow-y-auto { 582 | overflow-y: auto; 583 | } 584 | .rounded-t-md { 585 | border-top-left-radius: 0.375rem; 586 | border-top-right-radius: 0.375rem; 587 | } 588 | .bg-black\\/5 { 589 | background-color: #0000000d; 590 | } 591 | .bg-white { 592 | --un-bg-opacity: 1; 593 | background-color: rgb(255 255 255 / var(--un-bg-opacity)); 594 | } 595 | .p-8 { 596 | padding: 2rem; 597 | } 598 | .px-10 { 599 | padding-left: 2.5rem; 600 | padding-right: 2.5rem; 601 | } 602 | .pt-14 { 603 | padding-top: 3.5rem; 604 | } 605 | .text-6xl { 606 | font-size: 3.75rem; 607 | line-height: 1; 608 | } 609 | .text-xl { 610 | font-size: 1.25rem; 611 | line-height: 1.75rem; 612 | } 613 | .text-black { 614 | --un-text-opacity: 1; 615 | color: rgb(0 0 0 / var(--un-text-opacity)); 616 | } 617 | .font-light { 618 | font-weight: 300; 619 | } 620 | .font-medium { 621 | font-weight: 500; 622 | } 623 | .leading-tight { 624 | line-height: 1.25; 625 | } 626 | .font-sans { 627 | font-family: 628 | ui-sans-serif, 629 | system-ui, 630 | -apple-system, 631 | BlinkMacSystemFont, 632 | Segoe UI, 633 | Roboto, 634 | Helvetica Neue, 635 | Arial, 636 | Noto Sans, 637 | sans-serif, 638 | "Apple Color Emoji", 639 | "Segoe UI Emoji", 640 | Segoe UI Symbol, 641 | "Noto Color Emoji"; 642 | } 643 | .antialiased { 644 | -webkit-font-smoothing: antialiased; 645 | -moz-osx-font-smoothing: grayscale; 646 | } 647 | @media (prefers-color-scheme: dark) { 648 | .dark\\:bg-black { 649 | --un-bg-opacity: 1; 650 | background-color: rgb(0 0 0 / var(--un-bg-opacity)); 651 | } 652 | .dark\\:bg-white\\/10 { 653 | background-color: #ffffff1a; 654 | } 655 | .dark\\:text-white { 656 | --un-text-opacity: 1; 657 | color: rgb(255 255 255 / var(--un-text-opacity)); 658 | } 659 | } 660 | @media (min-width: 640px) { 661 | .sm\\:text-2xl { 662 | font-size: 1.5rem; 663 | line-height: 2rem; 664 | } 665 | .sm\\:text-8xl { 666 | font-size: 6rem; 667 | line-height: 1; 668 | } 669 | } 670 | " 671 | `; 672 | 673 | exports[`template > correctly outputs style blocks for error-dev.vue 2`] = ` 674 | "*, 675 | :before, 676 | :after { 677 | box-sizing: border-box; 678 | border-width: 0; 679 | border-style: solid; 680 | border-color: var(--un-default-border-color, #e5e7eb); 681 | } 682 | :before, 683 | :after { 684 | --un-content: ""; 685 | } 686 | html { 687 | line-height: 1.5; 688 | -webkit-text-size-adjust: 100%; 689 | -moz-tab-size: 4; 690 | tab-size: 4; 691 | font-family: 692 | ui-sans-serif, 693 | system-ui, 694 | sans-serif, 695 | "Apple Color Emoji", 696 | "Segoe UI Emoji", 697 | Segoe UI Symbol, 698 | "Noto Color Emoji"; 699 | font-feature-settings: normal; 700 | font-variation-settings: normal; 701 | -webkit-tap-highlight-color: transparent; 702 | } 703 | body { 704 | margin: 0; 705 | line-height: inherit; 706 | } 707 | h1 { 708 | font-size: inherit; 709 | font-weight: inherit; 710 | } 711 | pre { 712 | font-family: 713 | ui-monospace, 714 | SFMono-Regular, 715 | Menlo, 716 | Monaco, 717 | Consolas, 718 | Liberation Mono, 719 | Courier New, 720 | monospace; 721 | font-feature-settings: normal; 722 | font-variation-settings: normal; 723 | font-size: 1em; 724 | } 725 | h1, 726 | p, 727 | pre { 728 | margin: 0; 729 | } 730 | *, 731 | :before, 732 | :after { 733 | --un-rotate: 0; 734 | --un-rotate-x: 0; 735 | --un-rotate-y: 0; 736 | --un-rotate-z: 0; 737 | --un-scale-x: 1; 738 | --un-scale-y: 1; 739 | --un-scale-z: 1; 740 | --un-skew-x: 0; 741 | --un-skew-y: 0; 742 | --un-translate-x: 0; 743 | --un-translate-y: 0; 744 | --un-translate-z: 0; 745 | --un-pan-x: ; 746 | --un-pan-y: ; 747 | --un-pinch-zoom: ; 748 | --un-scroll-snap-strictness: proximity; 749 | --un-ordinal: ; 750 | --un-slashed-zero: ; 751 | --un-numeric-figure: ; 752 | --un-numeric-spacing: ; 753 | --un-numeric-fraction: ; 754 | --un-border-spacing-x: 0; 755 | --un-border-spacing-y: 0; 756 | --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); 757 | --un-ring-shadow: 0 0 rgb(0 0 0 / 0); 758 | --un-shadow-inset: ; 759 | --un-shadow: 0 0 rgb(0 0 0 / 0); 760 | --un-ring-inset: ; 761 | --un-ring-offset-width: 0px; 762 | --un-ring-offset-color: #fff; 763 | --un-ring-width: 0px; 764 | --un-ring-color: rgb(147 197 253 / 0.5); 765 | --un-blur: ; 766 | --un-brightness: ; 767 | --un-contrast: ; 768 | --un-drop-shadow: ; 769 | --un-grayscale: ; 770 | --un-hue-rotate: ; 771 | --un-invert: ; 772 | --un-saturate: ; 773 | --un-sepia: ; 774 | --un-backdrop-blur: ; 775 | --un-backdrop-brightness: ; 776 | --un-backdrop-contrast: ; 777 | --un-backdrop-grayscale: ; 778 | --un-backdrop-hue-rotate: ; 779 | --un-backdrop-invert: ; 780 | --un-backdrop-opacity: ; 781 | --un-backdrop-saturate: ; 782 | --un-backdrop-sepia: ; 783 | } 784 | " 785 | `; 786 | 787 | exports[`template > correctly outputs style blocks for loading.vue 1`] = ` 788 | ".nuxt-loader-bar { 789 | background: repeating-linear-gradient( 790 | to right, 791 | #36e4da 0%, 792 | #1de0b1 25%, 793 | #00dc82 50%, 794 | #1de0b1 75%, 795 | #36e4da 100% 796 | ); 797 | height: 100px; 798 | background-size: 200% auto; 799 | background-position: 0 0; 800 | animation: gradient 2s infinite; 801 | animation-fill-mode: forwards; 802 | animation-timing-function: linear; 803 | position: fixed; 804 | bottom: 0; 805 | left: 0; 806 | right: 0; 807 | height: 5px; 808 | } 809 | .visual-effects .nuxt-loader-bar { 810 | height: 100px; 811 | bottom: -50px; 812 | left: -50px; 813 | right: -50px; 814 | filter: blur(100px); 815 | } 816 | .visual-effects .mouse-gradient { 817 | background: repeating-linear-gradient( 818 | to right, 819 | #00dc82 0%, 820 | #1de0b1 50%, 821 | #36e4da 100% 822 | ); 823 | filter: blur(100px); 824 | opacity: 0.5; 825 | } 826 | #animation-toggle { 827 | position: fixed; 828 | padding: 10px; 829 | top: 0; 830 | right: 0; 831 | transition: opacity 0.4s ease-in; 832 | opacity: 0; 833 | } 834 | #animation-toggle:hover { 835 | opacity: 0.8; 836 | } 837 | @keyframes gradient { 838 | 0% { 839 | background-position: 0 0; 840 | } 841 | 100% { 842 | background-position: -200% 0; 843 | } 844 | } 845 | @media (prefers-color-scheme: dark) { 846 | html, 847 | body { 848 | color: white; 849 | color-scheme: dark; 850 | } 851 | .nuxt-loader-bar { 852 | opacity: 0.5; 853 | } 854 | } 855 | *, 856 | :before, 857 | :after { 858 | box-sizing: border-box; 859 | border-width: 0; 860 | border-style: solid; 861 | border-color: var(--un-default-border-color, #e5e7eb); 862 | } 863 | :before, 864 | :after { 865 | --un-content: ""; 866 | } 867 | html { 868 | line-height: 1.5; 869 | -webkit-text-size-adjust: 100%; 870 | -moz-tab-size: 4; 871 | tab-size: 4; 872 | font-family: 873 | ui-sans-serif, 874 | system-ui, 875 | sans-serif, 876 | "Apple Color Emoji", 877 | "Segoe UI Emoji", 878 | Segoe UI Symbol, 879 | "Noto Color Emoji"; 880 | font-feature-settings: normal; 881 | font-variation-settings: normal; 882 | -webkit-tap-highlight-color: transparent; 883 | } 884 | body { 885 | margin: 0; 886 | line-height: inherit; 887 | } 888 | a { 889 | color: inherit; 890 | text-decoration: inherit; 891 | } 892 | button { 893 | font-family: inherit; 894 | font-feature-settings: inherit; 895 | font-variation-settings: inherit; 896 | font-size: 100%; 897 | font-weight: inherit; 898 | line-height: inherit; 899 | color: inherit; 900 | margin: 0; 901 | padding: 0; 902 | } 903 | button { 904 | text-transform: none; 905 | } 906 | button { 907 | -webkit-appearance: button; 908 | background-color: transparent; 909 | background-image: none; 910 | } 911 | button { 912 | cursor: pointer; 913 | } 914 | svg { 915 | display: block; 916 | vertical-align: middle; 917 | } 918 | *, 919 | :before, 920 | :after { 921 | --un-rotate: 0; 922 | --un-rotate-x: 0; 923 | --un-rotate-y: 0; 924 | --un-rotate-z: 0; 925 | --un-scale-x: 1; 926 | --un-scale-y: 1; 927 | --un-scale-z: 1; 928 | --un-skew-x: 0; 929 | --un-skew-y: 0; 930 | --un-translate-x: 0; 931 | --un-translate-y: 0; 932 | --un-translate-z: 0; 933 | --un-pan-x: ; 934 | --un-pan-y: ; 935 | --un-pinch-zoom: ; 936 | --un-scroll-snap-strictness: proximity; 937 | --un-ordinal: ; 938 | --un-slashed-zero: ; 939 | --un-numeric-figure: ; 940 | --un-numeric-spacing: ; 941 | --un-numeric-fraction: ; 942 | --un-border-spacing-x: 0; 943 | --un-border-spacing-y: 0; 944 | --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); 945 | --un-ring-shadow: 0 0 rgb(0 0 0 / 0); 946 | --un-shadow-inset: ; 947 | --un-shadow: 0 0 rgb(0 0 0 / 0); 948 | --un-ring-inset: ; 949 | --un-ring-offset-width: 0px; 950 | --un-ring-offset-color: #fff; 951 | --un-ring-width: 0px; 952 | --un-ring-color: rgb(147 197 253 / 0.5); 953 | --un-blur: ; 954 | --un-brightness: ; 955 | --un-contrast: ; 956 | --un-drop-shadow: ; 957 | --un-grayscale: ; 958 | --un-hue-rotate: ; 959 | --un-invert: ; 960 | --un-saturate: ; 961 | --un-sepia: ; 962 | --un-backdrop-blur: ; 963 | --un-backdrop-brightness: ; 964 | --un-backdrop-contrast: ; 965 | --un-backdrop-grayscale: ; 966 | --un-backdrop-hue-rotate: ; 967 | --un-backdrop-invert: ; 968 | --un-backdrop-opacity: ; 969 | --un-backdrop-saturate: ; 970 | --un-backdrop-sepia: ; 971 | } 972 | .absolute { 973 | position: absolute; 974 | } 975 | .relative { 976 | position: relative; 977 | } 978 | .top-0 { 979 | top: 0; 980 | } 981 | .z-20 { 982 | z-index: 20; 983 | } 984 | .h-\\[200px\\] { 985 | height: 200px; 986 | } 987 | .min-h-screen { 988 | min-height: 100vh; 989 | } 990 | .w-\\[200px\\] { 991 | width: 200px; 992 | } 993 | .flex { 994 | display: flex; 995 | } 996 | .flex-col { 997 | flex-direction: column; 998 | } 999 | .items-center { 1000 | align-items: center; 1001 | } 1002 | .justify-center { 1003 | justify-content: center; 1004 | } 1005 | .overflow-hidden { 1006 | overflow: hidden; 1007 | } 1008 | .rounded-full { 1009 | border-radius: 9999px; 1010 | } 1011 | .bg-white { 1012 | --un-bg-opacity: 1; 1013 | background-color: rgb(255 255 255 / var(--un-bg-opacity)); 1014 | } 1015 | .text-center { 1016 | text-align: center; 1017 | } 1018 | .transition-opacity { 1019 | transition-property: opacity; 1020 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 1021 | transition-duration: 0.15s; 1022 | } 1023 | @media (prefers-color-scheme: dark) { 1024 | .dark\\:bg-black { 1025 | --un-bg-opacity: 1; 1026 | background-color: rgb(0 0 0 / var(--un-bg-opacity)); 1027 | } 1028 | } 1029 | " 1030 | `; 1031 | 1032 | exports[`template > correctly outputs style blocks for loading.vue 2`] = ` 1033 | "#animation-toggle { 1034 | position: fixed; 1035 | padding: 10px; 1036 | top: 0; 1037 | right: 0; 1038 | transition: opacity 0.4s ease-in; 1039 | opacity: 0; 1040 | } 1041 | #animation-toggle:hover { 1042 | opacity: 0.8; 1043 | } 1044 | @keyframes gradient { 1045 | 0% { 1046 | background-position: 0 0; 1047 | } 1048 | 100% { 1049 | background-position: -200% 0; 1050 | } 1051 | } 1052 | @media (prefers-color-scheme: dark) { 1053 | html, 1054 | body { 1055 | color: white; 1056 | color-scheme: dark; 1057 | } 1058 | } 1059 | *, 1060 | :before, 1061 | :after { 1062 | box-sizing: border-box; 1063 | border-width: 0; 1064 | border-style: solid; 1065 | border-color: var(--un-default-border-color, #e5e7eb); 1066 | } 1067 | :before, 1068 | :after { 1069 | --un-content: ""; 1070 | } 1071 | html { 1072 | line-height: 1.5; 1073 | -webkit-text-size-adjust: 100%; 1074 | -moz-tab-size: 4; 1075 | tab-size: 4; 1076 | font-family: 1077 | ui-sans-serif, 1078 | system-ui, 1079 | sans-serif, 1080 | "Apple Color Emoji", 1081 | "Segoe UI Emoji", 1082 | Segoe UI Symbol, 1083 | "Noto Color Emoji"; 1084 | font-feature-settings: normal; 1085 | font-variation-settings: normal; 1086 | -webkit-tap-highlight-color: transparent; 1087 | } 1088 | body { 1089 | margin: 0; 1090 | line-height: inherit; 1091 | } 1092 | a { 1093 | color: inherit; 1094 | text-decoration: inherit; 1095 | } 1096 | button { 1097 | font-family: inherit; 1098 | font-feature-settings: inherit; 1099 | font-variation-settings: inherit; 1100 | font-size: 100%; 1101 | font-weight: inherit; 1102 | line-height: inherit; 1103 | color: inherit; 1104 | margin: 0; 1105 | padding: 0; 1106 | } 1107 | button { 1108 | text-transform: none; 1109 | } 1110 | button { 1111 | -webkit-appearance: button; 1112 | background-color: transparent; 1113 | background-image: none; 1114 | } 1115 | button { 1116 | cursor: pointer; 1117 | } 1118 | svg { 1119 | display: block; 1120 | vertical-align: middle; 1121 | } 1122 | *, 1123 | :before, 1124 | :after { 1125 | --un-rotate: 0; 1126 | --un-rotate-x: 0; 1127 | --un-rotate-y: 0; 1128 | --un-rotate-z: 0; 1129 | --un-scale-x: 1; 1130 | --un-scale-y: 1; 1131 | --un-scale-z: 1; 1132 | --un-skew-x: 0; 1133 | --un-skew-y: 0; 1134 | --un-translate-x: 0; 1135 | --un-translate-y: 0; 1136 | --un-translate-z: 0; 1137 | --un-pan-x: ; 1138 | --un-pan-y: ; 1139 | --un-pinch-zoom: ; 1140 | --un-scroll-snap-strictness: proximity; 1141 | --un-ordinal: ; 1142 | --un-slashed-zero: ; 1143 | --un-numeric-figure: ; 1144 | --un-numeric-spacing: ; 1145 | --un-numeric-fraction: ; 1146 | --un-border-spacing-x: 0; 1147 | --un-border-spacing-y: 0; 1148 | --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); 1149 | --un-ring-shadow: 0 0 rgb(0 0 0 / 0); 1150 | --un-shadow-inset: ; 1151 | --un-shadow: 0 0 rgb(0 0 0 / 0); 1152 | --un-ring-inset: ; 1153 | --un-ring-offset-width: 0px; 1154 | --un-ring-offset-color: #fff; 1155 | --un-ring-width: 0px; 1156 | --un-ring-color: rgb(147 197 253 / 0.5); 1157 | --un-blur: ; 1158 | --un-brightness: ; 1159 | --un-contrast: ; 1160 | --un-drop-shadow: ; 1161 | --un-grayscale: ; 1162 | --un-hue-rotate: ; 1163 | --un-invert: ; 1164 | --un-saturate: ; 1165 | --un-sepia: ; 1166 | --un-backdrop-blur: ; 1167 | --un-backdrop-brightness: ; 1168 | --un-backdrop-contrast: ; 1169 | --un-backdrop-grayscale: ; 1170 | --un-backdrop-hue-rotate: ; 1171 | --un-backdrop-invert: ; 1172 | --un-backdrop-opacity: ; 1173 | --un-backdrop-saturate: ; 1174 | --un-backdrop-sepia: ; 1175 | } 1176 | " 1177 | `; 1178 | 1179 | exports[`template > correctly outputs style blocks for welcome.vue 1`] = ` 1180 | "@media (prefers-color-scheme: light) { 1181 | .get-started-gradient-border { 1182 | background: linear-gradient(to right, #ffffff, #ffffff), 1183 | linear-gradient(to right, #00dc82, #1de0b1, #36e4da); 1184 | } 1185 | .gradient-border-modules { 1186 | background: linear-gradient( 1187 | var(--gradient-angle), 1188 | rgba(247, 209, 76), 1189 | rgba(247, 209, 76, 0.6), 1190 | rgba(255, 255, 255, 0.8), 1191 | rgba(247, 209, 76) 1192 | ); 1193 | } 1194 | .gradient-border-examples { 1195 | background: linear-gradient( 1196 | var(--gradient-angle), 1197 | rgba(141, 234, 255), 1198 | rgba(141, 234, 255, 0.6), 1199 | rgba(255, 255, 255, 0.8), 1200 | rgba(141, 234, 255) 1201 | ); 1202 | } 1203 | .gradient-border-documentation { 1204 | background: linear-gradient( 1205 | var(--gradient-angle), 1206 | rgba(0, 220, 130), 1207 | rgba(0, 220, 130, 0.6), 1208 | rgba(255, 255, 255, 0.8), 1209 | rgba(0, 220, 130) 1210 | ); 1211 | } 1212 | } 1213 | @media (prefers-color-scheme: dark) { 1214 | .get-started-gradient-border { 1215 | background: linear-gradient(to right, #18181b, #18181b), 1216 | linear-gradient(to right, #00dc82, #1de0b1, #36e4da); 1217 | } 1218 | .gradient-border-modules { 1219 | background: linear-gradient( 1220 | var(--gradient-angle), 1221 | rgba(247, 209, 76), 1222 | rgba(163, 129, 8), 1223 | rgba(255, 255, 255, 0.3), 1224 | rgba(163, 129, 8) 1225 | ); 1226 | } 1227 | .gradient-border-examples { 1228 | background: linear-gradient( 1229 | var(--gradient-angle), 1230 | rgba(141, 234, 255), 1231 | rgba(0, 138, 169), 1232 | rgba(255, 255, 255, 0.3), 1233 | rgba(0, 138, 169) 1234 | ); 1235 | } 1236 | .gradient-border-documentation { 1237 | background: linear-gradient( 1238 | var(--gradient-angle), 1239 | rgba(0, 220, 130), 1240 | rgba(0, 63, 37), 1241 | rgba(255, 255, 255, 0.2), 1242 | rgba(0, 63, 37) 1243 | ); 1244 | } 1245 | } 1246 | .get-started-gradient-border { 1247 | background-clip: padding-box, border-box; 1248 | background-origin: padding-box, border-box; 1249 | border-color: transparent; 1250 | border-radius: 12px; 1251 | border-width: 1px; 1252 | } 1253 | .get-started-gradient-border:hover 1254 | > :is(.get-started-gradient-left, .get-started-gradient-right) { 1255 | opacity: 0.2; 1256 | } 1257 | .get-started-gradient-left, 1258 | .get-started-gradient-right { 1259 | opacity: 0; 1260 | } 1261 | .gradient-border { 1262 | opacity: 0; 1263 | position: absolute; 1264 | top: 0; 1265 | left: 0; 1266 | width: calc(100% + 2px); 1267 | border-radius: 12px; 1268 | z-index: -1; 1269 | transform: translate(-1px, -1px); 1270 | } 1271 | .gradient-border-rect { 1272 | height: calc(100% + 2px); 1273 | } 1274 | @media (min-width: 1024px) { 1275 | .gradient-border-rect { 1276 | height: calc(100% + 1px); 1277 | } 1278 | } 1279 | .gradient-border-square { 1280 | height: calc(100% + 2px); 1281 | } 1282 | .modules-gradient-right { 1283 | opacity: 0; 1284 | } 1285 | .modules-container:hover > .gradient-border, 1286 | .examples-container:hover > .gradient-border, 1287 | .documentation-container:hover > .gradient-border { 1288 | opacity: 1; 1289 | animation: gradient-rotate 5s cubic-bezier(0, 0, 1, 1) 0s infinite reverse; 1290 | transition: all 0.3s linear; 1291 | } 1292 | .modules-container:hover > .modules-gradient-right { 1293 | opacity: 0.2; 1294 | } 1295 | .examples-container:hover > .examples-gradient-right { 1296 | opacity: 0.2; 1297 | } 1298 | .examples-gradient-right { 1299 | opacity: 0; 1300 | } 1301 | .documentation-image-color-light, 1302 | .documentation-image-color-dark { 1303 | display: none; 1304 | } 1305 | .modules-image-color-light, 1306 | .modules-image-color-dark { 1307 | display: none; 1308 | } 1309 | .examples-image-color-light, 1310 | .examples-image-color-dark { 1311 | display: none; 1312 | } 1313 | @media (prefers-color-scheme: light) { 1314 | .modules-image-light { 1315 | display: block; 1316 | } 1317 | .modules-image-dark { 1318 | display: none; 1319 | } 1320 | .modules-container:hover > a > .modules-image-light { 1321 | display: none; 1322 | } 1323 | .modules-container:hover > a > .modules-image-color-light { 1324 | display: block; 1325 | } 1326 | .examples-image-light { 1327 | display: block; 1328 | } 1329 | .examples-image-dark { 1330 | display: none; 1331 | } 1332 | .examples-container:hover > a > .examples-image-light { 1333 | display: none; 1334 | } 1335 | .examples-container:hover > a > .examples-image-color-light { 1336 | display: block; 1337 | } 1338 | .documentation-image-light { 1339 | display: block; 1340 | } 1341 | .documentation-image-dark { 1342 | display: none; 1343 | } 1344 | .documentation-container:hover > a > div > .documentation-image-light { 1345 | display: none; 1346 | } 1347 | .documentation-container:hover > a > div > .documentation-image-color-light { 1348 | display: block; 1349 | } 1350 | } 1351 | @media (prefers-color-scheme: dark) { 1352 | .modules-image-dark { 1353 | display: block; 1354 | } 1355 | .modules-image-light { 1356 | display: none; 1357 | } 1358 | .modules-container:hover > a > .modules-image-color-dark { 1359 | display: block; 1360 | } 1361 | .modules-container:hover > a > .modules-image-dark { 1362 | display: none; 1363 | } 1364 | .examples-image-dark { 1365 | display: block; 1366 | } 1367 | .examples-image-light { 1368 | display: none; 1369 | } 1370 | .examples-container:hover > a > .examples-image-color-dark { 1371 | display: block; 1372 | } 1373 | .examples-container:hover > a > .examples-image-dark { 1374 | display: none; 1375 | } 1376 | .documentation-image-dark { 1377 | display: block; 1378 | } 1379 | .documentation-image-light { 1380 | display: none; 1381 | } 1382 | .documentation-container:hover > a > div > .documentation-image-color-dark { 1383 | display: block; 1384 | } 1385 | .documentation-container:hover > a > div > .documentation-image-dark { 1386 | display: none; 1387 | } 1388 | } 1389 | .sr-only { 1390 | position: absolute; 1391 | width: 1px; 1392 | height: 1px; 1393 | padding: 0; 1394 | margin: -1px; 1395 | overflow: hidden; 1396 | clip: rect(0, 0, 0, 0); 1397 | white-space: nowrap; 1398 | border-width: 0; 1399 | } 1400 | .absolute { 1401 | position: absolute; 1402 | } 1403 | .relative { 1404 | position: relative; 1405 | } 1406 | .inset-x-0 { 1407 | left: 0; 1408 | right: 0; 1409 | } 1410 | .inset-y-0 { 1411 | top: 0; 1412 | bottom: 0; 1413 | } 1414 | .-top-\\[58px\\] { 1415 | top: -58px; 1416 | } 1417 | .-top-3 { 1418 | top: -0.75rem; 1419 | } 1420 | .left-0 { 1421 | left: 0; 1422 | } 1423 | .right-0 { 1424 | right: 0; 1425 | } 1426 | .z-1 { 1427 | z-index: 1; 1428 | } 1429 | .z-10 { 1430 | z-index: 10; 1431 | } 1432 | .order-last { 1433 | order: 9999; 1434 | } 1435 | .grid { 1436 | display: grid; 1437 | } 1438 | .col-span-2 { 1439 | grid-column: span 2 / span 2; 1440 | } 1441 | .row-span-2 { 1442 | grid-row: span 2 / span 2; 1443 | } 1444 | .grid-cols-2 { 1445 | grid-template-columns: repeat(2, minmax(0, 1fr)); 1446 | } 1447 | .mx-auto { 1448 | margin-left: auto; 1449 | margin-right: auto; 1450 | } 1451 | .mb-2 { 1452 | margin-bottom: 0.5rem; 1453 | } 1454 | .hidden { 1455 | display: none; 1456 | } 1457 | .h-\\[70px\\] { 1458 | height: 70px; 1459 | } 1460 | .h-32 { 1461 | height: 8rem; 1462 | } 1463 | .max-w-\\[960px\\] { 1464 | max-width: 960px; 1465 | } 1466 | .min-h-screen { 1467 | min-height: 100vh; 1468 | } 1469 | .w-\\[20\\%\\] { 1470 | width: 20%; 1471 | } 1472 | .w-full { 1473 | width: 100%; 1474 | } 1475 | .flex { 1476 | display: flex; 1477 | } 1478 | .flex-1 { 1479 | flex: 1 1 0%; 1480 | } 1481 | .flex-col { 1482 | flex-direction: column; 1483 | } 1484 | .flex-col-reverse { 1485 | flex-direction: column-reverse; 1486 | } 1487 | .place-content-center { 1488 | place-content: center; 1489 | } 1490 | .items-center { 1491 | align-items: center; 1492 | } 1493 | .justify-end { 1494 | justify-content: flex-end; 1495 | } 1496 | .justify-center { 1497 | justify-content: center; 1498 | } 1499 | .gap-3 { 1500 | gap: 0.75rem; 1501 | } 1502 | .gap-6 { 1503 | gap: 1.5rem; 1504 | } 1505 | .gap-x-4 { 1506 | column-gap: 1rem; 1507 | } 1508 | .gap-y-16 { 1509 | row-gap: 4rem; 1510 | } 1511 | .gap-y-2 { 1512 | row-gap: 0.5rem; 1513 | } 1514 | .gap-y-4 { 1515 | row-gap: 1rem; 1516 | } 1517 | .border { 1518 | border-width: 1px; 1519 | } 1520 | .border-t { 1521 | border-top-width: 1px; 1522 | } 1523 | .border-gray-200 { 1524 | --un-border-opacity: 1; 1525 | border-color: rgb(224 224 224 / var(--un-border-opacity)); 1526 | } 1527 | .hover\\:border-transparent:hover { 1528 | border-color: transparent; 1529 | } 1530 | .rounded { 1531 | border-radius: 0.25rem; 1532 | } 1533 | .rounded-xl { 1534 | border-radius: 0.75rem; 1535 | } 1536 | .bg-gray-100 { 1537 | --un-bg-opacity: 1; 1538 | background-color: rgb(238 238 238 / var(--un-bg-opacity)); 1539 | } 1540 | .bg-white { 1541 | --un-bg-opacity: 1; 1542 | background-color: rgb(255 255 255 / var(--un-bg-opacity)); 1543 | } 1544 | .from-blue-400 { 1545 | --un-gradient-from-position: 0%; 1546 | --un-gradient-from: rgb(96 165 250 / var(--un-from-opacity, 1)) 1547 | var(--un-gradient-from-position); 1548 | --un-gradient-to-position: 100%; 1549 | --un-gradient-to: rgb(96 165 250 / 0) var(--un-gradient-to-position); 1550 | --un-gradient-stops: var(--un-gradient-from), var(--un-gradient-to); 1551 | } 1552 | .from-green-400 { 1553 | --un-gradient-from-position: 0%; 1554 | --un-gradient-from: rgb(55 233 144 / var(--un-from-opacity, 1)) 1555 | var(--un-gradient-from-position); 1556 | --un-gradient-to-position: 100%; 1557 | --un-gradient-to: rgb(55 233 144 / 0) var(--un-gradient-to-position); 1558 | --un-gradient-stops: var(--un-gradient-from), var(--un-gradient-to); 1559 | } 1560 | .from-yellow-400 { 1561 | --un-gradient-from-position: 0%; 1562 | --un-gradient-from: rgb(250 204 21 / var(--un-from-opacity, 1)) 1563 | var(--un-gradient-from-position); 1564 | --un-gradient-to-position: 100%; 1565 | --un-gradient-to: rgb(250 204 21 / 0) var(--un-gradient-to-position); 1566 | --un-gradient-stops: var(--un-gradient-from), var(--un-gradient-to); 1567 | } 1568 | .to-transparent { 1569 | --un-gradient-to-position: 100%; 1570 | --un-gradient-to: transparent var(--un-gradient-to-position); 1571 | } 1572 | .bg-gradient-to-l { 1573 | --un-gradient-shape: to left; 1574 | --un-gradient: var(--un-gradient-shape), var(--un-gradient-stops); 1575 | background-image: linear-gradient(var(--un-gradient)); 1576 | } 1577 | .bg-gradient-to-r { 1578 | --un-gradient-shape: to right; 1579 | --un-gradient: var(--un-gradient-shape), var(--un-gradient-stops); 1580 | background-image: linear-gradient(var(--un-gradient)); 1581 | } 1582 | .p-1 { 1583 | padding: 0.25rem; 1584 | } 1585 | .px-4 { 1586 | padding-left: 1rem; 1587 | padding-right: 1rem; 1588 | } 1589 | .px-5 { 1590 | padding-left: 1.25rem; 1591 | padding-right: 1.25rem; 1592 | } 1593 | .py-14 { 1594 | padding-top: 3.5rem; 1595 | padding-bottom: 3.5rem; 1596 | } 1597 | .py-6 { 1598 | padding-top: 1.5rem; 1599 | padding-bottom: 1.5rem; 1600 | } 1601 | .pb-6 { 1602 | padding-bottom: 1.5rem; 1603 | } 1604 | .pt-\\[58px\\] { 1605 | padding-top: 58px; 1606 | } 1607 | .text-center { 1608 | text-align: center; 1609 | } 1610 | .text-2xl { 1611 | font-size: 1.5rem; 1612 | line-height: 2rem; 1613 | } 1614 | .text-4xl { 1615 | font-size: 2.25rem; 1616 | line-height: 2.5rem; 1617 | } 1618 | .text-sm { 1619 | font-size: 0.875rem; 1620 | line-height: 1.25rem; 1621 | } 1622 | .text-xl { 1623 | font-size: 1.25rem; 1624 | line-height: 1.75rem; 1625 | } 1626 | .text-black { 1627 | --un-text-opacity: 1; 1628 | color: rgb(0 0 0 / var(--un-text-opacity)); 1629 | } 1630 | .text-gray-700 { 1631 | --un-text-opacity: 1; 1632 | color: rgb(66 66 66 / var(--un-text-opacity)); 1633 | } 1634 | .hover\\:text-black:hover { 1635 | --un-text-opacity: 1; 1636 | color: rgb(0 0 0 / var(--un-text-opacity)); 1637 | } 1638 | .font-bold { 1639 | font-weight: 700; 1640 | } 1641 | .font-semibold { 1642 | font-weight: 600; 1643 | } 1644 | .font-mono { 1645 | font-family: 1646 | ui-monospace, 1647 | SFMono-Regular, 1648 | Menlo, 1649 | Monaco, 1650 | Consolas, 1651 | Liberation Mono, 1652 | Courier New, 1653 | monospace; 1654 | } 1655 | .antialiased { 1656 | -webkit-font-smoothing: antialiased; 1657 | -moz-osx-font-smoothing: grayscale; 1658 | } 1659 | .focus-visible\\:ring-2:focus-visible { 1660 | --un-ring-width: 2px; 1661 | --un-ring-offset-shadow: var(--un-ring-inset) 0 0 0 1662 | var(--un-ring-offset-width) var(--un-ring-offset-color); 1663 | --un-ring-shadow: var(--un-ring-inset) 0 0 0 1664 | calc(var(--un-ring-width) + var(--un-ring-offset-width)) 1665 | var(--un-ring-color); 1666 | box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), 1667 | var(--un-shadow); 1668 | } 1669 | .transition-opacity { 1670 | transition-property: opacity; 1671 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 1672 | transition-duration: 0.15s; 1673 | } 1674 | .duration-300 { 1675 | transition-duration: 0.3s; 1676 | } 1677 | @media (prefers-color-scheme: dark) { 1678 | .dark\\:block { 1679 | display: block; 1680 | } 1681 | .dark\\:hidden { 1682 | display: none; 1683 | } 1684 | .dark\\:border-gray-900 { 1685 | --un-border-opacity: 1; 1686 | border-color: rgb(24 24 27 / var(--un-border-opacity)); 1687 | } 1688 | .dark\\:border-transparent { 1689 | border-color: transparent; 1690 | } 1691 | .dark\\:border-none { 1692 | border-style: none; 1693 | } 1694 | .dark\\:bg-black { 1695 | --un-bg-opacity: 1; 1696 | background-color: rgb(0 0 0 / var(--un-bg-opacity)); 1697 | } 1698 | .dark\\:bg-gray-900 { 1699 | --un-bg-opacity: 1; 1700 | background-color: rgb(24 24 27 / var(--un-bg-opacity)); 1701 | } 1702 | .dark\\:bg-white\\/10 { 1703 | background-color: #ffffff1a; 1704 | } 1705 | .dark\\:text-gray-300 { 1706 | --un-text-opacity: 1; 1707 | color: rgb(189 189 189 / var(--un-text-opacity)); 1708 | } 1709 | .dark\\:text-white, 1710 | .dark\\:hover\\:text-white:hover { 1711 | --un-text-opacity: 1; 1712 | color: rgb(255 255 255 / var(--un-text-opacity)); 1713 | } 1714 | } 1715 | @media (min-width: 640px) { 1716 | .sm\\:col-span-1 { 1717 | grid-column: span 1 / span 1; 1718 | } 1719 | .sm\\:h-34 { 1720 | height: 8.5rem; 1721 | } 1722 | .sm\\:min-h-\\[220px\\] { 1723 | min-height: 220px; 1724 | } 1725 | .sm\\:flex-row { 1726 | flex-direction: row; 1727 | } 1728 | .sm\\:justify-between { 1729 | justify-content: space-between; 1730 | } 1731 | .sm\\:px-28 { 1732 | padding-left: 7rem; 1733 | padding-right: 7rem; 1734 | } 1735 | .sm\\:px-6 { 1736 | padding-left: 1.5rem; 1737 | padding-right: 1.5rem; 1738 | } 1739 | .sm\\:text-5xl { 1740 | font-size: 3rem; 1741 | line-height: 1; 1742 | } 1743 | .sm\\:text-base { 1744 | font-size: 1rem; 1745 | line-height: 1.5rem; 1746 | } 1747 | } 1748 | @media (min-width: 768px) { 1749 | .md\\:min-h-\\[180px\\] { 1750 | min-height: 180px; 1751 | } 1752 | } 1753 | @media (min-width: 1024px) { 1754 | .lg\\:order-none { 1755 | order: 0; 1756 | } 1757 | .lg\\:col-span-10 { 1758 | grid-column: span 10 / span 10; 1759 | } 1760 | .lg\\:col-span-4 { 1761 | grid-column: span 4 / span 4; 1762 | } 1763 | .lg\\:col-span-6 { 1764 | grid-column: span 6 / span 6; 1765 | } 1766 | .lg\\:grid-cols-10 { 1767 | grid-template-columns: repeat(10, minmax(0, 1fr)); 1768 | } 1769 | .lg\\:min-h-min { 1770 | min-height: min-content; 1771 | } 1772 | .lg\\:flex-col { 1773 | flex-direction: column; 1774 | } 1775 | .lg\\:px-8 { 1776 | padding-left: 2rem; 1777 | padding-right: 2rem; 1778 | } 1779 | .lg\\:py-7 { 1780 | padding-top: 1.75rem; 1781 | padding-bottom: 1.75rem; 1782 | } 1783 | } 1784 | " 1785 | `; 1786 | 1787 | exports[`template > correctly outputs style blocks for welcome.vue 2`] = ` 1788 | "@property --gradient-angle { 1789 | syntax: ""; 1790 | inherits: false; 1791 | initial-value: 180deg; 1792 | } 1793 | @keyframes gradient-rotate { 1794 | 0% { 1795 | --gradient-angle: 0deg; 1796 | } 1797 | 100% { 1798 | --gradient-angle: 360deg; 1799 | } 1800 | } 1801 | *, 1802 | :before, 1803 | :after { 1804 | box-sizing: border-box; 1805 | border-width: 0; 1806 | border-style: solid; 1807 | border-color: var(--un-default-border-color, #e5e7eb); 1808 | } 1809 | :before, 1810 | :after { 1811 | --un-content: ""; 1812 | } 1813 | html { 1814 | line-height: 1.5; 1815 | -webkit-text-size-adjust: 100%; 1816 | -moz-tab-size: 4; 1817 | tab-size: 4; 1818 | font-family: 1819 | ui-sans-serif, 1820 | system-ui, 1821 | sans-serif, 1822 | "Apple Color Emoji", 1823 | "Segoe UI Emoji", 1824 | Segoe UI Symbol, 1825 | "Noto Color Emoji"; 1826 | font-feature-settings: normal; 1827 | font-variation-settings: normal; 1828 | -webkit-tap-highlight-color: transparent; 1829 | } 1830 | body { 1831 | margin: 0; 1832 | line-height: inherit; 1833 | } 1834 | h1, 1835 | h2, 1836 | h3 { 1837 | font-size: inherit; 1838 | font-weight: inherit; 1839 | } 1840 | a { 1841 | color: inherit; 1842 | text-decoration: inherit; 1843 | } 1844 | h1, 1845 | h2, 1846 | h3, 1847 | p { 1848 | margin: 0; 1849 | } 1850 | ul { 1851 | list-style: none; 1852 | margin: 0; 1853 | padding: 0; 1854 | } 1855 | img, 1856 | svg { 1857 | display: block; 1858 | vertical-align: middle; 1859 | } 1860 | img { 1861 | max-width: 100%; 1862 | height: auto; 1863 | } 1864 | *, 1865 | :before, 1866 | :after { 1867 | --un-rotate: 0; 1868 | --un-rotate-x: 0; 1869 | --un-rotate-y: 0; 1870 | --un-rotate-z: 0; 1871 | --un-scale-x: 1; 1872 | --un-scale-y: 1; 1873 | --un-scale-z: 1; 1874 | --un-skew-x: 0; 1875 | --un-skew-y: 0; 1876 | --un-translate-x: 0; 1877 | --un-translate-y: 0; 1878 | --un-translate-z: 0; 1879 | --un-pan-x: ; 1880 | --un-pan-y: ; 1881 | --un-pinch-zoom: ; 1882 | --un-scroll-snap-strictness: proximity; 1883 | --un-ordinal: ; 1884 | --un-slashed-zero: ; 1885 | --un-numeric-figure: ; 1886 | --un-numeric-spacing: ; 1887 | --un-numeric-fraction: ; 1888 | --un-border-spacing-x: 0; 1889 | --un-border-spacing-y: 0; 1890 | --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); 1891 | --un-ring-shadow: 0 0 rgb(0 0 0 / 0); 1892 | --un-shadow-inset: ; 1893 | --un-shadow: 0 0 rgb(0 0 0 / 0); 1894 | --un-ring-inset: ; 1895 | --un-ring-offset-width: 0px; 1896 | --un-ring-offset-color: #fff; 1897 | --un-ring-width: 0px; 1898 | --un-ring-color: rgb(147 197 253 / 0.5); 1899 | --un-blur: ; 1900 | --un-brightness: ; 1901 | --un-contrast: ; 1902 | --un-drop-shadow: ; 1903 | --un-grayscale: ; 1904 | --un-hue-rotate: ; 1905 | --un-invert: ; 1906 | --un-saturate: ; 1907 | --un-sepia: ; 1908 | --un-backdrop-blur: ; 1909 | --un-backdrop-brightness: ; 1910 | --un-backdrop-contrast: ; 1911 | --un-backdrop-grayscale: ; 1912 | --un-backdrop-hue-rotate: ; 1913 | --un-backdrop-invert: ; 1914 | --un-backdrop-opacity: ; 1915 | --un-backdrop-saturate: ; 1916 | --un-backdrop-sepia: ; 1917 | } 1918 | " 1919 | `; 1920 | -------------------------------------------------------------------------------- /packages/templates/test/snapshots.spec.ts: -------------------------------------------------------------------------------- 1 | import fsp from 'node:fs/promises' 2 | import { fileURLToPath } from 'node:url' 3 | import { beforeAll, describe, it, expect } from 'vitest' 4 | import { execaCommand } from 'execa' 5 | import { format } from 'prettier' 6 | 7 | const distDir = fileURLToPath(new URL('../dist/templates', import.meta.url)) 8 | 9 | describe('template', () => { 10 | beforeAll(async () => { 11 | await execaCommand('pnpm build', { 12 | cwd: fileURLToPath(new URL('..', import.meta.url)) 13 | }) 14 | }) 15 | 16 | function formatCss (css: string) { 17 | return format(css, { 18 | parser: 'css' 19 | }) 20 | } 21 | 22 | it.each(['error-404.vue', 'error-500.vue', 'error-dev.vue', 'loading.vue', 'welcome.vue'])('correctly outputs style blocks for %s', async (file) => { 23 | const contents = await fsp.readFile(`${distDir}/${file}`, 'utf-8') 24 | 25 | const scopedStyle = contents.match(/