nuxt-ui-pro / dashboard

A dashboard template made with Vue and Nuxt UI Pro.

Nuxt UI Pro - Dashboard template

• Live demo
• Play on Stackblitz
• Documentation

Quick Start

npx nuxi init -t github:nuxt-ui-pro/dashboard

Setup

Make sure to install the dependencies:

# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install

Development Server

Start the development server on http://localhost:3000:

# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev

Production

Build the application for production:

# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build

Locally preview production build:

# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview

Check out the deployment documentation for more information.

Renovate integration

Install Renovate GitHub app on your repository and you are good to go.

dashboard's Issues

DashboardPanel breakpoint prop not working

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.

truncate UserDropdown

this not work:

dashboard/components/UserDropdown.vue

Line 86 in f94a5ff

<p class="truncate font-medium text-gray-900 dark:text-white">

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>

Some example using the repository pattern

I loved NuxtUI, I would like to see an example of a CRUD using the repository pattern.

Thanks.

Bug with switching modes "dark, light" on Safari in Dashboard UI-Pro template

Environment

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: -

Version

v2.15.2

Reproduction

https://dashboard-template.nuxt.dev/

Description

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

Fresh Install yields - WARN [Vue Router warn]: No match found for location with path "/_nuxt/"

npm install errors

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

More examples using tables

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.

Can't scroll on iOS after opening NavBar

How to reproduce:
(This issue needs to be reproduced on physical iOS device.
Simulators do not recreate the issue.)

1. Open Safari on iOS device and go to the template demo: https://dashboard-template.nuxt.dev/
2. Click the navbar 3 bar icon (this will open up the navigation)
3. Click again to close

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?

recommended way to mix with saas

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

Date Time Picker not responsive

Hi,

The date picker component is unusable on mobile portrait view.

See screenshot below.

Not sure which repo it is best open this in

Can you please provide an example with an select item in a modal?

It is not clear how we can use the pro component UDashboardModalwith a select element.

Can you provide an example in your demo App?

It is related to the following issue: nuxt/ui#806

SSR breaks because of createSharedComposable

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:

How UDashboardSidebarLinks supports menus with three or more layers

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.

Unable to find @ vueuse/nuxt @ 10.11.0 dependency.

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.

Do I need to purchase a license for personal use?

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?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@iconify-json/heroicons, @unovis/ts, @unovis/vue, eslint)

Detected dependencies

npm

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

---

• Check this box to trigger a request for Renovate to run again on this repository