Nuxt•3d ago

Nuxt UI Pro v3.1.3 - Use an official template - Dashboard

When following the installation guide here https://ui.nuxt.com/getting-started/installation/pro/nuxt#use-an-official-template I get an error [plugin:vite:import-analysis] Failed to resolve import "#build/ui-pro/page-card" ... full error below My advance problem solving skills (Google & ChatGPT) failed me. I have no idea where to start. I tried both npm and pnpm. I am able to clone the Nuxt UI Pro starter and it works no problem https://github.com/nuxt-ui-pro/starter.git

GitHub

GitHub - nuxt-ui-pro/starter: Nuxt UI Pro minimal starter.

Nuxt UI Pro minimal starter. Contribute to nuxt-ui-pro/starter development by creating an account on GitHub.

Nuxt UI

Installation - Nuxt UI Pro

Learn how to install and configure Nuxt UI Pro in your Nuxt application.

message.txt

3 Replies

kapa.ai•3d ago

Hi @LoftyNZ. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry you're encountering this error when using the official Nuxt UI Pro Dashboard template. Based on the knowledge sources provided, here are some key points and troubleshooting steps: 1. Official Templates and Installation Steps
The official guide instructs you to use a command like:

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

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

and then install dependencies and run the dev server. This should set up a working project with Nuxt UI Pro pre-configured, including the Dashboard template components like PageCard Use an official template. 2. Module and Import Configuration
The documentation specifies that you should use only the @nuxt/ui-pro module in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css']
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css']
})

You should not install or import @nuxt/ui separately, as @nuxt/ui-pro includes it automatically Installation Pro. 3. CSS Imports
Your main.css should import only @nuxt/ui-pro (not @nuxt/ui):

@import "tailwindcss";
@import "@nuxt/ui-pro";

@import "tailwindcss";
@import "@nuxt/ui-pro";

4. Error: Failed to resolve import "#build/ui-pro/page-card"
The knowledge sources do not provide explicit troubleshooting for this specific error. However, this error suggests that the build process is trying to import a file from a Nuxt build directory (#build/ui-pro/page-card), which may indicate: - The module is not installed correctly. - The project is missing a build step or configuration. - There is a version mismatch or a corrupted node_modules/.nuxt directory. Troubleshooting Steps: - Ensure you are using the latest version of Nuxt UI Pro (v3.1.3 as you mentioned). - Delete node_modules and .nuxt directories, then reinstall dependencies:

  rm -rf node_modules .nuxt
  npm install

  rm -rf node_modules .nuxt
  npm install

or with pnpm:

  rm -rf node_modules .nuxt
  pnpm install

  rm -rf node_modules .nuxt
  pnpm install

- Double-check that your nuxt.config.ts and main.css match the documentation above. - Make sure you are not mixing @nuxt/ui and @nuxt/ui-pro in your dependencies or imports. Additional Notes: - The fact that the minimal starter works but the dashboard template does not, suggests there may be a template-specific issue or a recent change in the template repository. - The knowledge sources do not mention the #build/ui-pro/page-card import path, so it's possible this is an internal or misconfigured alias. If the issue persists:
Since the documentation does not cover this specific error, and you have already tried the official starter successfully, you may want to: - Compare the working starter's nuxt.config.ts, package.json, and directory structure with the dashboard template. - Open an issue on the Nuxt UI Pro GitHub or contact Nuxt support, as this may be a bug or a template-specific misconfiguration. I'm sorry the knowledge sources do not provide a direct solution for this error, but following the above steps should help you isolate the problem or provide enough information for the maintainers to assist you further. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@1110697954303541299> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

LoftyNZOP•3d ago

I avoiding this problem and got a working version of the dashboard tamplate by cloning the git repo directly: git clone https://github.com/nuxt-ui-pro/dashboard.git pnpm dev I could not get it working following the instructions on the installation page: npm create nuxt@latest -- -t github:nuxt-ui-pro/landing

GitHub

GitHub - nuxt-ui-pro/dashboard: Nuxt Admin Dashboard Template made ...

Nuxt Admin Dashboard Template made with Nuxt UI Pro. - nuxt-ui-pro/dashboard

Gaming

Programming

Nuxt UI Pro v3.1.3 - Use an official template - Dashboard

Did you find this page helpful?