it's unable to change directory

[ihola777]

What happened?

i am trying to reorganize the files structure and move the default pages and layouts folders into another folder. i followed the instruction in manual but it does't work.

tsconfig.json

{
  "extends": "@quasar/app-vite/tsconfig-preset",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src/*": ["src/*"],
      "app/*": ["*"],
      "components/*": ["src/components/*"],
      "layouts/*": ["src/views/layouts/*"],
      "pages/*": ["src/views/pages/*"],
      "assets/*": ["src/assets/*"],
      "boot/*": ["src/boot/*"],
      "stores/*": ["src/stores/*"],
      "utils/*": ["src/utils/*"]
    }
  },
  "exclude": [
    "./dist",
    "./.quasar",
    "./node_modules",
    "./src-capacitor",
    "./src-cordova",
    "./quasar.config.*.temporary.compiled*"
  ]
}

quasar.config.js

vitePlugins: [
        ['vite-plugin-checker', {
          vueTsc: {
            tsconfigPath: 'tsconfig.vue-tsc.json'
          },
          eslint: {
            lintCommand: 'eslint "./**/*.{js,ts,mjs,cjs,vue}"'
          }
        }, { server: false }],
        [
          'vite-tsconfig-paths', {
            projects: ['./tsconfig.json', '../../tsconfig.json']
          }
        ]
      ]

routes.ts

import { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('views/layouts/MainLayout.vue'),
    children: [{ path: '', component: () => import('views/pages/IndexPage.vue') }],
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '/:catchAll(.*)*',
    component: () => import('views/pages/ErrorNotFound.vue'),
  },
];

export default routes;

What did you expect to happen?

trying to understand how to organize the folder structure

Reproduction URL

https://jsfiddle.net/rstoenescu/a2cuzods

How to reproduce?

1. create a new project
2. follow the instruction to change tsconfig.json and quasar.config.js
3. create a new folder named views
4. move pages and layouts into views.
5. change the routes.ts to import modified directory
6. run quasar dev

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

Microsoft Edge

Quasar info output

Operating System - Linux(5.15.153.1-microsoft-standard-WSL2) - linux/x64
NodeJs - 18.20.4

Global packages
  NPM - 10.7.0
  yarn - 1.22.22
  @quasar/cli - 2.4.1
  @quasar/icongenie - Not installed
  cordova - 12.0.0 ([email protected])

Important local packages
  quasar - 2.16.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.9.4 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.12 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.36 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.4.3
  pinia - 2.2.1 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.18 -- Native-ESM powered web dev build tool
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*



quasar inspect

resolve: {
    alias: {
      src: '/home/xxx/Projects/yyy/app.v1/src',
      app: '/home/xxx/Projects/yyy/app.v1',
      components: '/home/xxx/Projects/yyy/app.v1/src/components',
      layouts: '/home/xxx/Projects/yyy/app.v1/src/layouts',
      pages: '/home/xxx/Projects/yyy/app.v1/src/pages',
      assets: '/home/xxx/Projects/yyy/app.v1/src/assets',
      boot: '/home/xxx/Projects/yyy/app.v1/src/boot',
      stores: '/home/xxx/Projects/yyy/app.v1/src/stores'
    }
  },

### Relevant log output

```Shell
[vite] Internal server error: Failed to resolve import "views/layouts/MainLayout.vue" from "src/router/routes.ts". Does the file exist?

Additional context

[ihola777]

of cause i've installed the vite-tsconfig-paths.

[yusufkandemir]

You don't have added an entry for views to tsconfig.json > compilerOptions > paths

[ihola777]

thank you, misunderstood the configuration.
add new entry ( "views/*": ["src/views/*"]) works great.