DEV Community

Alexander Gorbunov
Alexander Gorbunov

Posted on

Vue 3 + Vite + Quasar issue

Namaste to everybody!;)

I would like to share with you one issue that i had today with my set-up of Vue, Vite and Quasar. The issue is small and it won't get much of your time and I hope this article would be useful for somebody.

I had troubles with default Quasar prebuild icons. Built a dev server I received an error:

The request url "../vite-vue-quasar/node_modules/@quasar/extras/roboto-font/web-font/KFOmCnqEu92Fr1Mu4mxM.woff" is outside of Vite serving allow list.

The same error I had for icons and all Quasar extras.

I had the following vite.config.js structure:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

import { quasar, transformAssetUrls } from '@quasar/vite-plugin'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue({
      template: { transformAssetUrls }
    }),
    quasar({
      sassVariables: '@/assets/styles/quasar-variables.sass'
    })
  ],
  resolve: {
    alias: {
      '@/': `${path.resolve(__dirname, 'src')}/`
    }
  }
})
Enter fullscreen mode Exit fullscreen mode

The tip here is that from Vite v2.7 server strict mode is set to true by default and it restricts serving files outside of workspace root.

Link to official docs: https://vitejs.dev/config/#server-fs-strict

Below you can find an option to solve this problem with enabled strict mode, but I just turn the strict mode off.

export default defineConfig({
  server: {
    fs: {
      // Allow serving files from one level up to the project root
      strict: false,
    }
  },
Enter fullscreen mode Exit fullscreen mode

Thank you for reading and I'm eager to hear if my decision is not right enough;)

Top comments (0)