nuxt-ui-pro / dashboard Goto Github PK
View Code? Open in Web Editor NEWA dashboard template made with Vue and Nuxt UI Pro.
Home Page: https://dashboard-template.nuxt.dev
A dashboard template made with Vue and Nuxt UI Pro.
Home Page: https://dashboard-template.nuxt.dev
I noticed when deploying this to cloudflare pages, and was trying to isolate the root cause. Eventually I found that the useDashboard
composable was the issue. I suspect that createSharedComposable
is the cause of the problem.
EDIT
Digging in some more it seems like the problem is defineShortcuts
which seems to be clientside only:
It is not clear how we can use the pro component UDashboardModal
with a select element.
Can you provide an example in your demo App?
It is related to the following issue: nuxt/ui#806
Hello, a bit confused about the licensing issue...
If I build a dashboard to observe my remote machine, do I need to purchase a license in order to use the website?
Operating System: Darwin
Node Version: v18.16.0
Nuxt Version: 3.11.1
CLI Version: 3.11.0
Nitro Version: 2.9.4
Package Manager: [email protected]
Builder: -
User Config: extends, devtools, ssr, runtimeConfig, modules, css, ui, app, pinia, i18n, veeValidate, plugins
Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @vueuse/[email protected], @vee-validate/[email protected], @pinia/[email protected], @nuxtjs/[email protected]
Build Modules: -
v2.15.2
https://dashboard-template.nuxt.dev/
Summary:
On the Dashboard UI-Pro template, there is a bug with switching between light and dark modes on Safari (both desktop and mobile). When switching modes, buttons, fields change with the selected mode, but the background doesn't change unless the page is refreshed.
Steps to Reproduce:
Open the Dashboard UI-Pro template on Safari.
Switch between light and dark modes using the provided toggle buttons.
Note that the buttons change with the selected mode, but the background doesn't change until the page is refreshed.
Expected Behavior:
The background should change immediately when switching between light and dark modes without requiring a page refresh.
Actual Behavior:
The background does not change when switching between light and dark modes unless the page is refreshed.
Additional Information:
This issue only occurs on Safari; it works fine on other browsers.
Additional context
it is better to have 2 separate repos SaaS and Dashboard, or for small SaaS better to combine 2 repos in 1?)
i know there is abstraction question, but I wonder how you imagine combining these two templates
This is really useful template showcasing the power of Nuxt Ui pro. Would be great to see more pages with tables as this is what used a lot in dashboard like apps: simple tables, rich tables, tables with editors, tables with drilldowns and etc
Thanks.
I’m having trouble getting the dashboard panel to collapse and turn into a slider properly. I see that there is a prop called breakpoint that lists the sizes for the breakpoint. Problem is that no matter what I set for the breakpoint it doesn’t work. It always collapses at lg and I want it to collapse at xl so that phones and tablets look the same. On iPad pro’s the left sidebar panel doesn’t collapse and everything is squished.
if I set :ui and then the collapsible and slideover settings I can hide it properly. But the navbar doesn’t show an icon to open the slideover until the screen reaches the proper size.
very frustrating.
Hi,
I tried using this template, but an npm install floods me with errors:
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @typescript-eslint/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/eslint
npm WARN dev eslint@"^9.2.0" from the root project
npm WARN 17 more (@eslint-community/eslint-utils, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^8.56.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@nuxt/eslint-config/node_modules/@typescript-eslint/eslint-plugin
npm WARN @typescript-eslint/eslint-plugin@"^7.8.0" from @nuxt/[email protected]
npm WARN node_modules/@nuxt/eslint-config
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/eslint
npm WARN peer eslint@"^8.56.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@nuxt/eslint-config/node_modules/@typescript-eslint/eslint-plugin
npm WARN @typescript-eslint/eslint-plugin@"^7.8.0" from @nuxt/[email protected]
npm WARN node_modules/@nuxt/eslint-config
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @typescript-eslint/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/eslint
npm WARN dev eslint@"^9.2.0" from the root project
npm WARN 17 more (@eslint-community/eslint-utils, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^8.56.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@nuxt/eslint-config/node_modules/@typescript-eslint/parser
npm WARN @typescript-eslint/parser@"^7.8.0" from @nuxt/[email protected]
npm WARN node_modules/@nuxt/eslint-config
npm WARN 1 more (@typescript-eslint/eslint-plugin)
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/eslint
npm WARN peer eslint@"^8.56.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@nuxt/eslint-config/node_modules/@typescript-eslint/parser
npm WARN @typescript-eslint/parser@"^7.8.0" from @nuxt/[email protected]
npm WARN node_modules/@nuxt/eslint-config
npm WARN 1 more (@typescript-eslint/eslint-plugin)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @typescript-eslint/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/eslint
npm WARN dev eslint@"^9.2.0" from the root project
npm WARN 17 more (@eslint-community/eslint-utils, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^8.56.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@nuxt/eslint-plugin/node_modules/@typescript-eslint/utils
npm WARN @typescript-eslint/utils@"^7.8.0" from @nuxt/[email protected]
npm WARN node_modules/@nuxt/eslint-plugin
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/eslint
npm WARN peer eslint@"^8.56.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@nuxt/eslint-plugin/node_modules/@typescript-eslint/utils
npm WARN @typescript-eslint/utils@"^7.8.0" from @nuxt/[email protected]
npm WARN node_modules/@nuxt/eslint-plugin
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @typescript-eslint/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/eslint
npm WARN dev eslint@"^9.2.0" from the root project
npm WARN 17 more (@eslint-community/eslint-utils, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^8.56.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@stylistic/eslint-plugin-plus/node_modules/@typescript-eslint/utils
npm WARN @typescript-eslint/utils@"^7.8.0" from @stylistic/[email protected]
npm WARN node_modules/@stylistic/eslint-plugin-plus
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/eslint
npm WARN peer eslint@"^8.56.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@stylistic/eslint-plugin-plus/node_modules/@typescript-eslint/utils
npm WARN @typescript-eslint/utils@"^7.8.0" from @stylistic/[email protected]
npm WARN node_modules/@stylistic/eslint-plugin-plus
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @typescript-eslint/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/eslint
npm WARN dev eslint@"^9.2.0" from the root project
npm WARN 17 more (@eslint-community/eslint-utils, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^8.56.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@stylistic/eslint-plugin-ts/node_modules/@typescript-eslint/utils
npm WARN @typescript-eslint/utils@"^7.8.0" from @stylistic/[email protected]
npm WARN node_modules/@stylistic/eslint-plugin-ts
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/eslint
npm WARN peer eslint@"^8.56.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@stylistic/eslint-plugin-ts/node_modules/@typescript-eslint/utils
npm WARN @typescript-eslint/utils@"^7.8.0" from @stylistic/[email protected]
npm WARN node_modules/@stylistic/eslint-plugin-ts
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @typescript-eslint/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/eslint
npm WARN dev eslint@"^9.2.0" from the root project
npm WARN 17 more (@eslint-community/eslint-utils, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^8.56.0" from @typescript-eslint/[email protected]
npm WARN node_modules/eslint-plugin-import-x/node_modules/@typescript-eslint/utils
npm WARN @typescript-eslint/utils@"^7.4.0" from [email protected]
npm WARN node_modules/eslint-plugin-import-x
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/eslint
npm WARN peer eslint@"^8.56.0" from @typescript-eslint/[email protected]
npm WARN node_modules/eslint-plugin-import-x/node_modules/@typescript-eslint/utils
npm WARN @typescript-eslint/utils@"^7.4.0" from [email protected]
npm WARN node_modules/eslint-plugin-import-x
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @typescript-eslint/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/eslint
npm WARN dev eslint@"^9.2.0" from the root project
npm WARN 17 more (@eslint-community/eslint-utils, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^8.56.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@nuxt/eslint-config/node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/type-utils
npm WARN @typescript-eslint/type-utils@"7.8.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@nuxt/eslint-config/node_modules/@typescript-eslint/eslint-plugin
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/eslint
npm WARN peer eslint@"^8.56.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@nuxt/eslint-config/node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/type-utils
npm WARN @typescript-eslint/type-utils@"7.8.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@nuxt/eslint-config/node_modules/@typescript-eslint/eslint-plugin
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @typescript-eslint/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/eslint
npm WARN dev eslint@"^9.2.0" from the root project
npm WARN 17 more (@eslint-community/eslint-utils, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^8.56.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@nuxt/eslint-config/node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils
npm WARN @typescript-eslint/utils@"7.8.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@nuxt/eslint-config/node_modules/@typescript-eslint/eslint-plugin
npm WARN 1 more (@typescript-eslint/type-utils)
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/eslint
npm WARN peer eslint@"^8.56.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@nuxt/eslint-config/node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils
npm WARN @typescript-eslint/utils@"7.8.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@nuxt/eslint-config/node_modules/@typescript-eslint/eslint-plugin
npm WARN 1 more (@typescript-eslint/type-utils)
What to do about this?
Regards,
Sven
eg:
<UDashboardSidebarLinks :links="links"/>
const links = [{
label: 'A',
icon: 'i-heroicons-home',
}, {
label: 'B',
icon: 'i-heroicons-cog-8-tooth',
children: [{
label: 'C',
}, {
label: 'D',
children: [{
label: 'E',
}]
}],
}]
The second and third layers appear to be on the same layer, lacking necessary indentation.
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@iconify-json/heroicons
, @unovis/ts
, @unovis/vue
, eslint
)package.json
@iconify-json/heroicons ^1.1.21
@iconify-json/simple-icons ^1.1.109
@nuxt/fonts ^0.7.1
@nuxt/ui-pro ^1.3.1
@unovis/ts ^1.4.2
@unovis/vue ^1.4.2
@vueuse/nuxt ^10.11.0
date-fns ^3.6.0
nuxt ^3.12.3
v-calendar ^3.1.2
@nuxt/eslint ^0.3.13
eslint ^9.6.0
vue-tsc ^2.0.26
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @vueuse/nuxt@^10.11.0.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
I loved NuxtUI, I would like to see an example of a CRUD using the repository pattern.
Thanks.
How to reproduce:
(This issue needs to be reproduced on physical iOS device.
Simulators do not recreate the issue.)
You will now not be able to scroll the page unless you (refocus by clicking?) on the content.
Perhaps this is an issue with focusing within the UDashboardNavbar component?
Perhaps it is receiving the scroll events meant for the content?
this not work:
dashboard/components/UserDropdown.vue
Line 86 in f94a5ff
but this work it:
<template #account>
<div class="truncate text-left">
<p>
Signed in as
</p>
<p class="truncate font-medium text-gray-900 dark:text-white">
[email protected]
</p>
</div>
</template>
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.