🎨 Unified Assets and Templates for Nuxt
Home Page: https://nuxt-ui-templates.vercel.app
License: MIT License
Unified Assets & Templates for Nuxt.
|
Pre-compiled html templates for internal pages. Demo on templates.ui.nuxtjs.org |
Shared assets and resources. |
corepack enable (use npm i -g corepack for Node.js < 16.10)pnpm installMIT. Design resources are published under CC-BY-ND-4.0.
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
The current spa-loading-icon.d.ts of the @nuxt/ui-templates package seems to be malformed:
export type DefaultMessages = Record<, string | boolean | number >
declare const template: (data: Partial<DefaultMessages>) => string
export { template }Which makes it difficult to use the package due to compiler errors:
node_modules/@nuxt/ui-templates/dist/templates/spa-loading-icon.d.ts:1:38 - error TS1110: Type expected.
1 export type DefaultMessages = Record<, string | boolean | number >
~
Found 1 error.
As of now, we use vanilla inlined css and svg inside error templates (with duplicates), poi for loading-screen and a mixed design for youch.
Desired output from nice is a set of html templates (lodash template), compiled styles and minimal runtime scripts.
I had been looking into parcel and posthtml since it seems a perfect stack for building such output. Parcel would make bundling a template much easier and built-in posthtml support brings
opportunities like template support, easy development and inlining assets which is far easier than alternatives like rollup or webpack or vanilla if we want to use...
Only issue i couldn't resolve was that posthtml seems to be prod only. So we might find a way to enable it in development of parcel or use with programmatic API...
Nuxt project info: 20:41:00
Darwinv14.18.33.0.0-rc.8[email protected]vitetypescript--1- Nothing special, just create a new project using pnpm:
pnpm dlx nuxi init nuxt3-app-rc8
cd nuxt3-app-rc8
pnpm install --shamefully-hoist
2- Edit the app.vue page to pass version as a props to the NuxtWelcome component:
<template>
<div>
<NuxtWelcome :version="version" />
</div>
</template>
<script setup>
const props = defineProps({
version: {
type: String,
default: 'v3.0.0-rc.8'
}
})
</script>P.S. The version prop according the definition is a String, so a value like v3.0.0-rc.8 should be accepted.
3- Finally run the project:
pnpm dev
The generated url looks like this:
https://github.com/nuxt/framework/releases/tag/%7B%7B%20version%20%7D%7D
and when you click on the link, you'll be redirected to the 404 page.
The generated url should be like this:
https://github.com/nuxt/framework/releases/tag/v3.0.0-rc.8
Although in both cases the generated HTML looks like this:
<a href="https://github.com/nuxt/framework/releases/tag/v3.0.0-rc.8" target="_blank" rel="noopener" class="flex justify-end pb-1 sm:pb-2" data-v-e12da2d6="">v3.0.0-rc.8</a>A quick -dirty- fix would be to edit /node_modules/.pnpm/@[email protected]/node_modules/@nuxt/ui-templates/dist/templates/welcome.vue like so:
<a :href="`https://github.com/nuxt/framework/releases/tag/${version}`" target="_blank" rel="noopener" class="flex justify-end pb-1 sm:pb-2" v-text="version" />This would apply the string interpolation correctly, and here is the original generated source:
<a href="https://github.com/nuxt/framework/releases/tag/{{version}}" target="_blank" rel="noopener" class="flex justify-end pb-1 sm:pb-2" v-text="version" />I couldn't find the original template, since welcome.vue is generated using the magic on the fly, and I know this may have no impact to the framework it self, since it's just a welcome component example, but this may solve another similar issue in some other places.
No response
It should be nice to have a go back button window.history.back() here :
https://github.com/nuxt/assets/blob/aa803dceebb99a83b65401bcf90c259bc0d63a62/packages/templates/templates/error-404/index.html#LL71C9-L71C10
When trying to access https://components.ui.nuxtjs.org/ I get an Error:
This Serverless Function has crashed.
Your connection is working correctly.
Vercel is working correctly.
Screenshot:
We need to choose a CSS design system for nice project. I'm aware of nuxt/ui development, and it would be also totally perfect to adopt it just need to ensure it won't block project development and also we have a way to extract/inline and use css to redistribute (i think it was using css-in-js within vue components but not sure about latest state)
Other alternatives are in-house designs with or without tailwind css. What matters in the end is that we can distribute or inline stylesheets.
/cc @Atinux @alexchopin
Internationalization of messages would be important specially for production error pages.
We currently maintain them as a config: https://github.com/nuxt/nuxt.js/blob/dev/packages/config/src/config/messages.js
But could be nice if we export translated messages to be set with single config
Hello, this may be a bit trivial but I noticed on the welcome page that inside the third element, the twitter one, the text doesn't quite line up with the previous two anchor tags ( https://templates.ui.nuxtjs.org/templates/welcome )
I looked and the CSS classes are a little bit different on that one so I was thinking I could just make them all uniform.
But also with that being done all 3 elements would be the same and you could use "v-for" and then populate their individual data from an array perhaps, like you did with the {{messages}} text.
I've never contributed to a project like this before would this be something I could do a pull request for?
All os
no repro
current link: in github docs
https://nuxt.com/docs/examples/hello-world
current link: on website
https://nuxt.com/docs/examples/essentials/hello-world
No response
No response
https://stackblitz.com/edit/github-7umkre?file=nuxt.config.ts
The nuxt/assets/spa-loading-icon template's style tag is rendered inside a div tag by default, which is invalid html.
Run npm install && npm run generate in the linked reproduction and see @nuxtjs/html-validator's error.
It could be a solution to provide a full html page with a properly placed <style> tag in nuxt/assets, but I'm not sure if that would keep the idea of the loading icon only being a loading icon.
Also, see nuxt-modules/html-validator#402.
ERROR HTML validation errors found for /200.html 9:45:28 PM
inline
6:250 error <style> element is not permitted as content under <div> element-permitted-content
✖ 1 problem (1 error, 0 warnings)
More information:
https://html-validate.org/rules/element-permitted-content.htmlUsing Safari 16.1 on MacOS.
CPU Usage is at up to 250% while the page is displayed.
I would like to ask whether this library can be copied as the underlying UI framework development, and I will indicate the source
Currently, it can only be used in uno config. Configuration modification in TS:
To avoid the same mistake of nuxt 2 to make exactly two (html+SFC) versions of the default error design, we can simply wrap the existing HTML error to a Vue SFC and use it for isomorphic (+SPA) rendering logic. This can happen during the design packaging process.
Currently, error pages added to the production bundle have a big impact on server bundle size:
We shall find a super minimal design that also fits for various websites as default error page.
Reference design for Nuxt 2: https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/views/error.html
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These problems occurred while renovating this repository. View logs.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@unocss/reset, pnpm, typescript, unocss, vite, vitest).github/workflows/ci.yml
actions/checkout v4actions/setup-node v4
package.json
@nuxtjs/eslint-config-typescript ^12.1.0eslint ^8.57.0jiti ^1.21.0lerna ^8.1.2prettier ^3.2.5typescript ^5.4.4vitest ^1.4.0pnpm 8.15.6packages/assets/package.json
packages/templates/package.json
@types/html-minifier ^4.0.5@types/lodash.template ^4.5.3@unocss/reset ^0.58.9critters 0.0.22execa ^8.0.1globby ^14.0.1html-minifier ^4.0.0jiti ^1.21.0knitwork ^1.1.0lodash.template ^4.5.0scule ^1.3.0unocss ^0.58.9upath ^2.0.1vite ^5.2.8
It would be nice to also support the Typography so examples with content (not only content module) could have nice design.
This way I could simplify this example: https://stackblitz.com/edit/github-r42be9?file=nuxt.config.ts,app.vue&theme=light
Windows_NTv16.13.23.0.0-27485997.c426f3e[email protected]vite---Repo:
https://github.com/Aareksio/nuxt3-issues/tree/error-style-bleed
CodeSandbox:
https://codesandbox.io/s/eloquent-cartwright-gkr2ll?file=/app.vue
TL;DR:
<div>
<nuxt-page/>
<nuxt-link to="/404">404</nuxt-link>
</div>After visiting default 404 page, global style is applied
No response
No response
I think you should review accessibility of the welcome page. Light green text on white background is very hard to read for some users. It's also the case for all the doc at https://v3.nuxtjs.org
As discussed in nuxt/ui#159 this is a drain on people working on machine without 3d acceleration for css animations.
Current solution implemented is to click on a hidden button on the top right corner while the animation is running. Obviously this is not the best solution as during that time the computer is extremely laggy so it's hard to move the mouse anyways on top of a css-animated background.
Additionally the button is hidden, so people have to go to github issues to find out.
Either there should be FPS measurement to figure out if animations should be used, or please enable a nuxt.config.js option to disable this for the whole project.
Thank you!
I don't know whether the expectation of this project will be the same as that of element UI. There will be more possibilities. And for all users. I have such doubts.
Some documentation or samples?
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
Error type: Cannot find preset's package (@nuxtjs)
While debugging my app, I noticed that errors displayed alongside a 500 page were black on a black background, making the errors unreadable. After I inspected the element I realised I was actually setting a color for paragraphs in my own CSS and that Nuxt's own stylesheet was not setting the color on the paragraph but on the parent div via the text-black class.
I believe it would be best if Nuxt's colors were applied on a more granular level (so on P or any text elements directly) to avoid this edge case.
Maybe we could wrap title and icons to next lines when width is low?
For nuxt 2 we don't have any issues but also not have much opportunities to have a more complex and beautiful design because of size and single file limitation and it is somehow tricky for loading-screen as we need a whole conntect stack to serve static assets.
One solution to this would be serving assets from a CDN (like jsdelivr) including js libraries we use. This could make development and distribution much easier since final templates are html/string only can be embeded into any bundle also in production
Since beginning we were pushing nuxt as a framework with best developer experience and over the time designs got inconsistent and spread into several projects, places and build pipelines (if any). Current components to focus are:
Usage of unified design might be extended to new places like:
Meanwhile it is totally fine with what we have for nuxt2, new projects like Nitro and Nuxt 3 might need a standard template library otherwise we need to duplicate them all and use inline css in places that need.
Random idea, but what do you think about producing production bundles that are fully JS for pnp support? cc: @pi0
import template from '@nuxt/design/404'
import messages from '@nuxt/design/messages/en'
// possibly even for static assets?
import vfs from '@nuxt/design/assets'
const html = template(messages)https://templates.ui.nuxtjs.org/templates/loading
If we drag the cursor in the right top corner, scrollbars will apear
Add overflow: hidden CSS rule to the document body
Linuxv18.6.03.0.0-rc.8[email protected]vitebuild, runtimeConfig--Start nuxt app and navigate to http://localhost:3000
A Nuxt logo will be shown with CSS gradient animations which follow your mouse pointer.
The animation is very laggy on my machine (16gb ram, 8 cores Intel(R) Core(TM) i7-3720QM CPU @ 2.60GHz).
My browser has significant FPS drop, and loading animation takes more resources than nuxt building process.
Please add an option to not show CSS animations during the loading.
No response
From what I have seen these components should be working without nuxt in bare Vue3 project, However this is not clear in documentation. Either yes or no, it will be nice to mention in the readme and if supported then will be great to have some simple instruction on how to use this with vue only project
Issue 207 fixed a broken link in the welcome.vue page that is displayed every time some n00b like me tries nuxt for the first time.
It hasn't yet been published to npm, so 150k+ people a week continue to download the welcome page with the broken link.
Is there a timeline for updating from 1.1.1 on npm?
Additional assets should be moved to @nuxt/ui-assets and dynamically addressed if necessary.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.