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')}/`
    }
  }
})

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,
    }
  },

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