Kamil Caglar Posts - Answer Overflow

Kamil Caglar

•Created by Kamil Caglar on 11/3/2024 in #❓・help

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

6 replies

Gaming

Programming