Nuxt•2mo ago

Adding a plugin to Vite cause an error (NuxtUI 3 for Vue)

Hi, I've been looking for a solution to add a plugin to Inertia and AdonisJS unsuccesfully. A few weeks ago, the Nuxt UI 3 team made the component library compatible with standalone Vue projects (https://github.com/nuxt/ui/issues/2129). I'd like to use it with AdonisJS and Inertia. After creating a fresh AdonisJS project with the Inertia and Vue 3 starter kit

# Vue without server-side rendering
npm init adonisjs@latest -- -K=inertia --adapter=vue --no-ssr

# Vue without server-side rendering
npm init adonisjs@latest -- -K=inertia --adapter=vue --no-ssr

Here is the procedure followed to add NuxtUI to the project https://ui3.nuxt.dev/getting-started/installation/vue 1. Install the package with the latest commit, as the release has not yet been made

npm install https://pkg.pr.new/@nuxt/ui@845f85a

npm install https://pkg.pr.new/@nuxt/ui@845f85a

2. Add the Nuxt UI Vite plugin in your vite.config.ts

import ui from '@nuxt/ui/vite'
import { defineConfig } from 'vite'
import { getDirname } from '@adonisjs/core/helpers'
import inertia from '@adonisjs/inertia/client'
import vue from '@vitejs/plugin-vue'
import adonisjs from '@adonisjs/vite/client'

export default defineConfig({
  plugins: [
    inertia({ ssr: { enabled: false } }),
    vue(),
    adonisjs({ entrypoints: ['inertia/app/app.ts'], reload: ['resources/views/**/*.edge'] }),
    ui(),
  ],

  resolve: {
    alias: {
      '~/': `${getDirname(import.meta.url)}/inertia/`,
    },
  },
})

import ui from '@nuxt/ui/vite'
import { defineConfig } from 'vite'
import { getDirname } from '@adonisjs/core/helpers'
import inertia from '@adonisjs/inertia/client'
import vue from '@vitejs/plugin-vue'
import adonisjs from '@adonisjs/vite/client'

export default defineConfig({
  plugins: [
    inertia({ ssr: { enabled: false } }),
    vue(),
    adonisjs({ entrypoints: ['inertia/app/app.ts'], reload: ['resources/views/**/*.edge'] }),
    ui(),
  ],

  resolve: {
    alias: {
      '~/': `${getDirname(import.meta.url)}/inertia/`,
    },
  },
})

Here I already have a problem: I can't launch the application.

failed to load config from /Users/kamil/Documents/projects/myproject/vite.config.ts

   TypeError: The URL must be of scheme file

failed to load config from /Users/kamil/Documents/projects/myproject/vite.config.ts

   TypeError: The URL must be of scheme file

There is no problem with the use of the library with a Vite et Vue project alone. It seems to be a problem with Vite or AdonisJS, but the error is not very explicit. I tried with Node 18, 20 and 22. Here is the Replit to reproduce https://replit.com/@kamilcaglarcont/Adonis-x-Inertia-x-Vue-3-x-Nuxt-UI?v=1

3 Replies

kapa.ai•2mo ago

Hi @Kamil Caglar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I apologize, but I don't have enough information in the provided knowledge sources to directly answer your question about adding Nuxt UI 3 to an AdonisJS project with Inertia and Vue 3. The knowledge sources primarily focus on Nuxt.js and don't contain specific information about integrating Nuxt UI with AdonisJS or Inertia. However, I can provide some general insights based on the information available: 1. The error you're encountering seems to be related to Vite configuration, not specifically to Nuxt UI. The error message suggests there might be an issue with how the vite.config.ts file is being loaded or interpreted. 2. Nuxt UI is primarily designed for Nuxt.js projects, and while it can be used in standalone Vue projects, integrating it with other frameworks like AdonisJS might require additional configuration or adaptations that are not covered in the standard documentation. 3. When adding Vite plugins, it's important to ensure they are compatible with your project setup. The addVitePlugin function mentioned in the Nuxt documentation Docs > Api > Kit > Builder > addVitePlugin (https://nuxt.com/docs/api/kit/builder#addviteplugin) is specific to Nuxt and may not be directly applicable to your AdonisJS setup. 4. The error "The URL must be of scheme file" suggests there might be an issue with how file paths are being resolved in your Vite configuration. This could be related to how the getDirname function from AdonisJS is being used in the Vite config. Given the complexity of integrating components from one framework (Nuxt) into a project using a different framework (AdonisJS) with Inertia, you might encounter challenges that are not covered in the standard documentation for either framework. You may need to experiment with different configuration options or seek assistance from the AdonisJS or Inertia communities for more specific guidance on integrating external UI libraries. If you continue to face issues, you might want to consider: 1. Checking the AdonisJS and Inertia documentation for any specific instructions on integrating external Vite plugins or UI libraries. 2. Reaching out to the AdonisJS or Inertia community forums for more targeted assistance with your specific setup. 3. Exploring alternative UI libraries that are more commonly used with AdonisJS and Inertia, which might have better integration support. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Kamil CaglarOP•2mo ago

https://github.com/nuxt/ui/issues/2518

GitHub

Adding the plugin to a Vite project with AdonisJS and Inertia cause...

Environment Operating System: Darwin Node Version: v22.11.0 Nuxt Version: - CLI Version: 3.15.0 Nitro Version: - Package Manager: [email protected] Builder: - User Config: - Runtime Modules: - Build Modul...

Gaming

Programming

Adding a plugin to Vite cause an error (NuxtUI 3 for Vue)