New major versions of q/app-vite and q/app-webpack (stable!) #16877
Replies: 40 comments 148 replies
-
|
I have been waiting for this. I just created new project and trying it out. |
Beta Was this translation helpful? Give feedback.
-
|
@rstoenescu Just to feed back - just upgraded our app to Vite 5 & q/app-vite 2 following the upgrade instructions - no issues so far, it seems to work like a charm! Great work by all involved. |
Beta Was this translation helpful? Give feedback.
-
|
Upgraded a SPA and it worked well. I have 2 questions:
|
Beta Was this translation helpful? Give feedback.
-
|
with the latest release of |
Beta Was this translation helpful? Give feedback.
-
|
Will check it out, but the ticket on vite-plugin-checker is still opened with no commit pushed to fix it! 
|
Beta Was this translation helpful? Give feedback.
-
|
I tried v2 and it's not fixed |
Beta Was this translation helpful? Give feedback.
-
|
ok. I was only testing in a local dev env |
Beta Was this translation helpful? Give feedback.
-
|
fi3ework/vite-plugin-checker#306 is now resolved. They support vue-tsc 2.x now (as mentioned in the release notes) @rstoenescu |
Beta Was this translation helpful? Give feedback.
-
|
@rstoenescu Yet any plans when |
Beta Was this translation helpful? Give feedback.
-
|
They are pretty close to the final versions. We want more people to switch to the betas first to report any potential problems. If something is found after we've released the stable versions and the potential fix requires a breaking change that would really ruin everything. So please help us test them! |
Beta Was this translation helpful? Give feedback.
-
|
Please consider a feature that allows the orientation of Quasar's built-in components to be switched from left-to-right (LTR) to right-to-left (RTL) to better serve developers working in RTL languages as their default direction |
Beta Was this translation helpful? Give feedback.
-
|
@mohamad68 we already have RTL support: Screenshots
If you meant something else, please explain it with clearer wording. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your response. What I meant was that By adding rtlcss to the PostCSS configuration and specifying lang:"fa-ir" in the Quasar configuration, and setting dir=rtl in the HTML tag, PostCSS will convert everything from left to right automatically. This means that if you write margin-right, it will be changed to margin-left. However, this is not the desired outcome I am looking for. |
Beta Was this translation helpful? Give feedback.
-
|
I updated two smaller projects to the beta and except for an incompatible app-extension everything worked fine. Still needs some testing but looks really promising so far. |
Beta Was this translation helpful? Give feedback.
-
|
On testing the beta "@quasar/app-vite": "2.0.0-beta.6", it seems that "unplugin-auto-import": "^0.17.5" vite plugin is causing an issue that looks as if it is interfering with quasar adding environment variables. This worked in latest production @quasar/app-vite & I'm not sure if it is a quasar or unplugin-auto-import issue, though leaning toward it being a quasar issue since it works in version 1.8.1... quasar.config.ts/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-env node */
// Configuration for your app
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
import { configure } from 'quasar/wrappers';
import { fileURLToPath } from 'node:url';
import { apps } from 'open';
import {
QuasarResolver,
VueUseComponentsResolver,
VueUseDirectiveResolver,
} from 'unplugin-vue-components/resolvers';
import TurboConsole from 'unplugin-turbo-console/vite';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
// import 'dotenv/config';
import { config } from 'dotenv';
config({ override: true });
export default configure((ctx) => {
return {
// https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
// preFetch: true,
// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli-vite/boot-files
boot: [
'i18n',
'axios',
'vueLogger',
// 'globalComponents',
'formkit',
'lodash',
'vueDOMPurifyHTML',
// 'piniaRoutes',
// 'firebase',
'appReg',
],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
css: ['app.scss', 'tw-app.css'],
// https://github.com/quasarframework/quasar/tree/dev/extras
extras: [
// 'ionicons-v4',
// 'mdi-v7',
// 'fontawesome-v6',
// 'eva-icons',
// 'themify',
// 'line-awesome',
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
'roboto-font', // optional, you are not bound to it
'material-icons', // optional, you are not bound to it
],
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
build: {
target: {
browser: ['es2022', 'firefox115', 'chrome115', 'safari14'],
node: 'node20',
},
vueRouterMode: 'history', // available values: 'hash', 'history'
// vueRouterBase,
// vueDevtools,
// vueOptionsAPI: false,
// rebuildCache: true, // rebuilds Vite/linter/etc cache on startup
// publicPath: '/',
// analyze: true,
// env: {},
env: {
DIRECTUS_URL: process.env.DIRECTUS_URL,
DIRECTUS_SERVER_TOKEN: process.env.DIRECTUS_SERVER_TOKEN,
STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
STRIPE_PUBLISHABLE_KEY: process.env.STRIPE_PUBLISHABLE_KEY,
STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET,
},
// rawDefine: {}
// ignorePublicFolder: true,
// minify: false,
// polyfillModulePreload: true,
// distDir
// extendViteConf (viteConf) {},
// viteVuePluginOptions: {},
vitePlugins: [
TurboConsole({}) as any,
AutoImport({
// targets to transform
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue$/,
/\.vue\?vue/, // .vue
/\.md$/, // .md
],
// global imports to register
imports: [
// presets
'vue',
'vue-router',
'pinia',
'quasar',
'vue-i18n',
'@vueuse/core',
// custom
{
/* quasar: [
// https://quasar.dev/vue-composables
'useQuasar',
'useDialogPluginComponent',
'useFormChild',
'useMeta',
'QBtn',
], */
/* '@vueuse/core': [
// named imports
'useFetch',
// 'vOnClickOutside', // import { useMouse } from '@vueuse/core',
// alias
// ['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
], */
'vue-i18n': [
// named imports
'createI18n', // import { useMouse } from '@vueuse/core',
// 'preFetch',
// alias
//['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
],
'quasar/wrappers': [
// named imports
'boot', // import { useMouse } from '@vueuse/core',
'preFetch',
// alias
//['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
],
lodash: [
// named imports
['default', '_'], // import { useMouse } from '@vueuse/core',
// alias
//['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
],
'lorem-ipsum': [
// named imports
'LoremIpsum',
],
'vue-logger-plugin': [
// named imports
'createLogger', // import { useMouse } from '@vueuse/core',
'StringifyAndParseObjectsHook',
// alias
//['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
],
'@formkit/inputs': [
// named imports
'outer',
'inner',
'wrapper',
'label',
'help',
'messages',
'message',
'icon',
'prefix',
'suffix',
'textInput',
'textareaInput',
'initialValue',
'$attrs',
// alias
//['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
],
'@formkit/vue': [
// named imports
'plugin',
'defaultConfig',
// alias
//['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
],
'@formkit/addons': [
// named imports
'createAutoAnimatePlugin',
// alias
//['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
],
axios: [['default', 'axios']],
'vue-dompurify-html': [
// default imports
['default', 'VueDOMPurifyHTML'], // import { default as axios } from 'axios',
],
quasar: [
// default imports
'Loading',
// ['default', 'VueDOMPurifyHTML'], // import { default as axios } from 'axios',
],
'@directus/sdk': [
'createDirectus',
'rest',
'realtime',
'graphql',
// Comment
'createComment',
'updateComment',
'deleteComment',
'createField',
'deleteField',
'readActivities',
'readActivity',
'readCollection',
'readCollections',
'createCollection',
'updateCollection',
'deleteCollection',
'readField',
'readFieldsByCollection',
'readFields',
'updateField',
'aggregate',
// Users
'createUser',
'createUsers',
'readUser',
'readUsers',
'updateUser',
'updateUsers',
'deleteUser',
'deleteUsers',
// Auth
'withToken',
'authentication',
// We're not autoimporting these because we're using the authentication composable
// 'login',
// 'logout',
'passwordReset',
'resetPassword',
'readProviders',
// Current User
'readMe',
'updateMe',
// Items
'createItem',
'createItems',
'readItem',
'readItems',
'updateItem',
'updateItems',
'deleteItem',
'deleteItems',
'readSingleton',
'updateSingleton',
// Files
'importFile',
'uploadFiles',
'readFile',
'readFiles',
'updateFile',
'updateFiles',
'deleteFile',
'deleteFiles',
// Folders
'readFolder',
'readFolders',
'updateFolder',
'updateFolders',
// Utils
],
/* 'firebase/app': [['initializeApp', 'fireBaseInitializeApp']],
'firebase/auth': [['getAuth', 'firebaseGetAuth']],
'firebase/analytics': [['getAnalytics', 'fireBaseGetAnalytics']],
'firebase/database': [
['getDatabase', 'fireBaseGetDatabase'],
['ref', 'fireBaseRef'],
['onValue', 'fireBaseOnValue'],
['push', 'fireBasePush'],
['remove', 'fireBaseRemove'],
['set', 'fireBaseSet'],
['get', 'fireBaseGet'],
['child', 'fireBaseChild'],
], */
// 'memfs/lib/fsa-to-node': ['FsaNodeFs', 'FsaNodeSyncAdapterWorker'],
/* 'memfs/lib/fsa-to-node/worker/FsaNodeSyncWorker': [
'FsaNodeSyncWorker',
], */
buffer: ['Buffer'],
process: [['*', 'process']],
'mount-vue-component': [['mount', 'createComponentInstance']],
// '[package-name]': [
// '[import-names]',
// // alias
// ['[from]', '[alias]'],
// ],
},
{
quasar: [
// https://quasar.dev
'QBtn',
],
},
// example type import
{
from: 'mount-vue-component',
imports: [
['vNode', 'componentVNode'],
['el', 'componentEL'],
['destroy', 'componentDestroy'],
],
type: true,
},
/* {
from: 'memfs/fsa/types',
imports: [['*', 'fsa']],
type: true,
}, */
{
from: 'axios',
imports: ['AxiosInstance'],
type: true,
},
{
from: '@formkit/core',
imports: ['FormKitTypeDefinition'],
type: true,
},
{
from: 'vue-router',
imports: ['RouteRecordRaw'],
type: true,
},
{
from: 'vue',
imports: ['App'],
type: true,
},
{
from: 'pinia',
imports: ['StoreDefinition'],
type: true,
},
{
from: '@directus/sdk',
imports: [
'DirectusClient',
'AuthenticationClient',
'RestClient',
'AuthenticationStorage',
'AuthenticationData',
],
type: true,
},
],
// Enable auto import by filename for default module exports under directories
defaultExportByFilename: false,
// Auto import for module exports under directories
// by default it only scan one level of modules under the directory
dirs: [
'./src/stores/**',
'./src/boot/**',
// './src/components/formkitInputs/**',
// './hooks',
// './composables' // only root modules
// './composables/**', // all nested modules
// ...
],
// Filepath to generate corresponding .d.ts file.
// Defaults to './auto-imports.d.ts' when `typescript` is installed locally.
// Set `false` to disable.
// dts: './auto-imports.d.ts',
dts: './auto-imports.d.ts',
// Auto import inside Vue template
// see https://github.com/unjs/unimport/pull/15 and https://github.com/unjs/unimport/pull/72
vueTemplate: false,
// Custom resolvers, compatible with `unplugin-vue-components`
// see https://github.com/antfu/unplugin-auto-import/pull/23/
resolvers: [
/* ... */
],
// Inject the imports at the end of other imports
injectAtEnd: true,
// Generate corresponding .eslintrc-auto-import.json file.
// eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
eslintrc: {
enabled: false, // Default `false`
filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
},
}),
Components({
// relative paths to the directory to search for components.
// dirs: ['src/components'],
// valid file extensions for components.
// extensions: ['vue'],
// Glob patterns to match file names to be detected as components.
// When specified, the `dirs` and `extensions` options will be ignored.
globs: ['src/components/**/*.vue', 'src/~Global/**/*.vue'],
// search for subdirectories
deep: true,
// resolvers for custom components
resolvers: [
QuasarResolver(),
VueUseComponentsResolver(),
VueUseDirectiveResolver(),
],
// generate `components.d.ts` global declarations,
// also accepts a path for custom filename
// default: `true` if package typescript is installed
dts: './components.d.ts',
// dts: true,
// Allow subdirectories as namespace prefix for components.
directoryAsNamespace: false,
// Collapse same prefixes (camel-sensitive) of folders and components
// to prevent duplication inside namespaced component name.
// works when `directoryAsNamespace: true`
collapseSamePrefixes: false,
// Subdirectory paths for ignoring namespace prefixes.
// works when `directoryAsNamespace: true`
globalNamespaces: [],
// auto import for directives
// default: `true` for Vue 3, `false` for Vue 2
// Babel is needed to do the transformation for Vue 2, it's disabled by default for performance concerns.
// To install Babel, run: `npm install -D @babel/parser`
directives: true,
// Transform path before resolving
importPathTransform: (v) => v,
// Allow for components to override other components with the same name
allowOverrides: false,
// filters for transforming targets
include: [/\.vue$/, /\.vue\?vue/],
exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
// Vue version of project. It will detect automatically if not specified.
// Acceptable value: 2 | 2.7 | 3
version: 3,
// Only provide types of components in library (registered globally)
types: [
// {
// from: '@formkit/core',
// names: ['FormKitTypeDefinition'],
// },
],
}),
[
'@intlify/unplugin-vue-i18n/vite',
{
// if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
// compositionOnly: false,
// if you want to use named tokens in your Vue I18n messages, such as 'Hello {name}',
// you need to set `runtimeOnly: false`
// runtimeOnly: false,
ssr: ctx.modeName === 'ssr',
// you need to set i18n resource including paths !
include: [fileURLToPath(new URL('./src/i18n', import.meta.url))],
},
],
[
'vite-plugin-checker',
{
vueTsc: {
tsconfigPath: 'tsconfig.vue-tsc.json',
},
eslint: {
lintCommand: 'eslint "./**/*.{js,ts,mjs,cjs,vue}"',
},
},
{ server: false },
],
],
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
devServer: {
// https: true
// open: true, // opens browser window automatically
open: {
app: {
name: apps.chrome,
arguments: ['--auto-open-devtools-for-tabs', '--incognito'],
},
}, // opens browser window automatically
},
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
framework: {
config: {
dark: 'auto',
},
// iconSet: 'material-icons', // Quasar icon set
// lang: 'en-US', // Quasar language pack
// For special cases outside of where the auto-import strategy can have an impact
// (like functional components as one of the examples),
// you can manually specify Quasar components/directives to be available everywhere:
//
// components: [],
// directives: [],
// Quasar plugins
plugins: [
'Notify',
'AppFullscreen',
'Cookies',
'LocalStorage',
'SessionStorage',
'Loading',
'LoadingBar',
'Dialog',
'Meta',
],
},
// animations: 'all', // --- includes all animations
// https://v2.quasar.dev/options/animations
animations: 'all',
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#sourcefiles
// sourceFiles: {
// rootComponent: 'src/App.vue',
// router: 'src/router/index',
// store: 'src/store/index',
// pwaRegisterServiceWorker: 'src-pwa/register-service-worker',
// pwaServiceWorker: 'src-pwa/custom-service-worker',
// pwaManifestFile: 'src-pwa/manifest.json',
// electronMain: 'src-electron/electron-main',
// electronPreload: 'src-electron/electron-preload'
// bexManifestFile: 'src-bex/manifest.json
// },
// https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
ssr: {
prodPort: 3000, // The default port that the production server should use
// (gets superseded if process.env.PORT is specified at runtime)
middlewares: [
'render', // keep this as last one
],
// extendPackageJson (json) {},
// extendSSRWebserverConf (esbuildConf) {},
// manualStoreSerialization: true,
// manualStoreSsrContextInjection: true,
// manualStoreHydration: true,
// manualPostHydrationTrigger: true,
pwa: false,
// pwaOfflineHtmlFilename: 'offline.html', // do NOT use index.html as name!
// will mess up SSR
// pwaExtendGenerateSWOptions (cfg) {},
// pwaExtendInjectManifestOptions (cfg) {}
},
// https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
pwa: {
workboxMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
// swFilename: 'sw.js',
// manifestFilename: 'manifest.json'
// extendManifestJson (json) {},
// useCredentialsForManifestTag: true,
// injectPwaMetaTags: false,
// extendPWACustomSWConf (esbuildConf) {},
// extendGenerateSWOptions (cfg) {},
// extendInjectManifestOptions (cfg) {}
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova
cordova: {
// noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor
capacitor: {
hideSplashscreen: true,
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron
electron: {
// extendElectronMainConf (esbuildConf) {},
// extendElectronPreloadConf (esbuildConf) {},
// extendPackageJson (json) {},
// Electron preload scripts (if any) from /src-electron, WITHOUT file extension
preloadScripts: ['electron-preload'],
// specify the debugging port to use for the Electron app when running in development mode
inspectPort: 5858,
bundler: 'packager', // 'packager' or 'builder'
packager: {
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
// OS X / Mac App Store
// appBundleId: '',
// appCategoryType: '',
// osxSign: '',
// protocol: 'myapp://path',
// Windows only
// win32metadata: { ... }
},
builder: {
// https://www.electron.build/configuration/configuration
appId: 'agencyosquasar',
},
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
bex: {
// extendBexScriptsConf (esbuildConf) {},
// extendBexManifestJson (json) {},
contentScripts: ['my-content-script'],
},
};
}); |
Beta Was this translation helpful? Give feedback.
-
|
I was able to get the environment variables working with unplugin-auto-import by adding { client: false } after the plugin: [
'unplugin-auto-import/vite',
{ ... }
{ client: false },
], |
Beta Was this translation helpful? Give feedback.
-
|
nope. I thought it was working, but putting { client: false } stops unplugin-auto-import from generating the d.ts file in an SPA.. |
Beta Was this translation helpful? Give feedback.
-
|
#17132 - erroneous config |
Beta Was this translation helpful? Give feedback.
-
|
Is there support for BEX using manifest v3 in any of them? |
Beta Was this translation helpful? Give feedback.
-
|
Trying to follow the instructions on the https://quasar.dev/quasar-cli-webpack/upgrade-guide/ page.
When I run |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
I have tried to upgrade app-vite v2 and devServer.proxy with configure suddently not work. This code below is works on previous version of app-vite, i dont know why is not work in app-vite v2 beta. |
Beta Was this translation helpful? Give feedback.
-
tl;dr:
|
Beta Was this translation helpful? Give feedback.
-
|
I just did the upgrade and it seems to work great. Smaller issues I am getting:
in the quasar.config.ts when switching to typescript I get this error from eslint: App compilation still works. The reason I am getting this, is that it doesn't like that I am disabling the vendor chunk option. Because my app is quiet large and I do my own chunking with webpack. The option still works, but eslint complains about it that it isn't defined. |
Beta Was this translation helpful? Give feedback.
-
|
Hi people, the last beta version (2.0.0-beta.14) was released 2 months ago, is this still being actively developed? If so, is there a rough ETA when 2.0.0 will have its first stable release? |
Beta Was this translation helpful? Give feedback.
-
|
Don't know if this has been reported or not, but using the beta with boot files seems to fail. Maybe some documentation missing, but the app can't locate boot files. Assuming from the server.ts change for local development. |
Beta Was this translation helpful? Give feedback.
-
|
Can you elaborate pls? A codesandbox/repo to reproduce would be great. |
Beta Was this translation helpful? Give feedback.
-
|
The progress of beta is too slow |
Beta Was this translation helpful? Give feedback.
-
|
It'll get there. Not much time left to become stable. |
Beta Was this translation helpful? Give feedback.
-
|
I would also be very interested to see what happens next. At the end of April it was written that we are pretty close to a release. At that time we were at 2.0.0-beta.12 now 5 months later we are at beta.22 and I don't have the feeling that we are making rapid progress. The roadmap unfortunately ends in Q3 2024 (https://github.com/quasarframework/quasar/blob/dev/ROADMAP.md) and does not provide any further information. Also I came across the project Quasar v3 is planned to release a new Quasar version? As a big fan of Quasar I would really appreciate an answer. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, we are trying hard to release it this month, but there's ecosystem changes that keep happening and we want it to be up to date with everything, rather than having to introduce breaking changes in our CLIs later. Examples: we started the road with Vite 3 and now we're using Vite 5; Sass keeps changing things (and we even backported many of the changes), etc etc. It's pretty stable, but some minor breaking changes might still occur (but nothing major). |
Beta Was this translation helpful? Give feedback.
-
|
Vite6 is already on its way |
Beta Was this translation helpful? Give feedback.
-
|
It would be nice if this version would allow the use of Quasar in a One guy found a solution here wich were never proposed as a PR: #7581 (comment) It seems to be a little patch but so much critical that I guess only @rstoenescu should handle it Anyway, thank you for filling the gap in terms of Vite version! PS: There is a discussion about it here #11059 |
Beta Was this translation helpful? Give feedback.
-
|
@rstoenescu I did a test migration with rc2 using the Vite guide: One thing that I needed to remove: tsconfig.json "compilerOptions": {
- "baseUrl": "."
}I think the docs imply that this should be the entire contents of the file: {
"extends": "./.quasar/tsconfig.json"
}In my case, I had some additional keys so assumed that the only thing to replace was the "extends" key. I just created a brand new Quasar project v1.4.3 using typescript and this was the default tsconfig.json: {
"extends": "@quasar/app-vite/tsconfig-preset",
"compilerOptions": {
"baseUrl": "."
}
} |
Beta Was this translation helpful? Give feedback.
-
|
Also make sure that the docs PWA has been updated for you. Force it if you have to. We're continuously improving the guide. |
Beta Was this translation helpful? Give feedback.
-
|
I meant I scaffolded a new 1.4.3 project to compare to 2.0 RC just to make sure the baseUrl wasn't something I had added at some point to my project. I added a pull request as well. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
1.4.3 does not corresponds to any of the latest versions (not UI, not app-vite, not app-webpack, etc) |
Beta Was this translation helpful? Give feedback.
-
|
Ah, my mistake I think. Here's what npm init quasar scaffolded. {
"dependencies": {
"@quasar/extras": "^1.16.4",
"quasar": "^2.8.0",
"vue": "^3.2.29",
"vue-router": "^4.0.12"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.10.0",
"@typescript-eslint/parser": "^5.10.0",
"eslint": "^8.11.0",
"eslint-plugin-vue": "^9.0.0",
"eslint-config-prettier": "^8.1.0",
"prettier": "^2.5.1",
"@types/node": "^12.20.21",
"@quasar/app-vite": "^1.4.3",
"autoprefixer": "^10.4.2",
"typescript": "^4.5.4"
},
} |
Beta Was this translation helpful? Give feedback.
-
|
@acrobid |
Beta Was this translation helpful? Give feedback.
-
|
Hi ! Thanks for the release :) Typscript isn't detecting properly the I add to add the following lines into my "include": ["**/*", ".quasar/**/*"]Do you have any idea why that is ? |
Beta Was this translation helpful? Give feedback.
-
|
It has already been fixed, but not released yet. TS doesn't include private directories by default, e.g. |
Beta Was this translation helpful? Give feedback.
-
|
Oh great ! Thanks a lot :) |
Beta Was this translation helpful? Give feedback.
-
Important update: 2024/11/27We have finalized the final q/app-vite v2.0.0 & q/app-webpack v4.0.0 (both have a few fixes on top of rc.4) and we are now writing the docs (q/app-vite is done, q/app-webpack needs a bit more work). Expect the release in a few more days. The docs for the legacy apps (q/app-vite v1 & q/app-webpack v3) will be moved to a dedicated website (legacy-app.quasar.dev) and the main docs (quasar.dev) will have only information related to the newer CLIs. |
Beta Was this translation helpful? Give feedback.
-
|
@rstoenescu is there yet any time-plan when TY in advance for replying. |
Beta Was this translation helpful? Give feedback.
-
|
Today or tomorrow. |
Beta Was this translation helpful? Give feedback.
-
|
...only sm hours left ... |
Beta Was this translation helpful? Give feedback.
-
|
I am sorry I can`t start your project: What are the codes for the Terminal? |
Beta Was this translation helpful? Give feedback.
-
|
Hi, the code is 055-021. Also, what? |
Beta Was this translation helpful? Give feedback.
-
|
Running an npm update to test the webpack version to see if it fixes all the issues I identified previously (scroll up). |
Beta Was this translation helpful? Give feedback.
-
|
@sonicviz This is 100% not due to our CLIs. Make sure you don't have multiple (long forgotten) browser tabs opened. The console log is for the "quasar serve" server, not your UI files and build. Check your browser devtools console. |
Beta Was this translation helpful? Give feedback.
-
|
Ok, I'll keep looking. Might be the bundle splitting I'm using in prod needs an update. However, I just updated to the release V4 and it upgraded aok, but running quasar dev (previously fine) now gives App • Using quasar.config.js in "esm" format I'm at a loss here. Have there been more quasar.config changes I need to do now? |
Beta Was this translation helpful? Give feedback.
-
|
@sonicviz can you please provide a repo with a barebones reproduction? I need something to play with to investigate. |
Beta Was this translation helpful? Give feedback.
-
|
Let me go through the update guide again to double check it's consistent with current instructions. |
Beta Was this translation helpful? Give feedback.
-
|
I don't know if this is related but I was checking quasar cli version and attempting to upgrade that prior to doing this again, but it errors out now with: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined Node.js v20.12.2 quasar info Operating System Windows_NT(10.0.22635) - win32/x64 Global packages Networking |
Beta Was this translation helpful? Give feedback.
-
|
I've just tried updating from I'm getting this TS error now:
Looking at app-vite |
Beta Was this translation helpful? Give feedback.
-
|
Nevermind, I missed that step in the migration guide 😨 |
Beta Was this translation helpful? Give feedback.
-
|
Me too, but I have no idea to what step do you reference. So what is the fix? And what information I have missed? :-/ |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
Hm, so building works now fine, but my VSCODE cannot find any imports starting with /src ... the /components imports are fine. But Code suggestion also suggest /src, but shows "Cannot find module..." afterwards. Any idea what is here still missing? |
Beta Was this translation helpful? Give feedback.
-
|
Please restart VS Code |
Beta Was this translation helpful? Give feedback.
-
|
Hello ! I'm struggling a bit with the new tsconfig. Isn't this line missing: "moduleResolution": "bundler", |
Beta Was this translation helpful? Give feedback.
-
|
Then why error TS5070: Option '--resolveJsonModule' cannot be specified when 'moduleResolution' is set to 'classic'.It gets fixed either by removing |
Beta Was this translation helpful? Give feedback.
-
|
I see here in ts docs that |
Beta Was this translation helpful? Give feedback.
-
|
I don't understand why this is happening 🤷 |
Beta Was this translation helpful? Give feedback.
-
|
Finally found you again :) (couldn't remember where we've talked about this) I came across this and some other issues myself too. So, after some investigation, I came to the conclusion that Cypress using ts-node is very problematic. It's not well maintained and will be out of sync with new Node and TS stuff. So, I opened a feature request over on Cypress in hopes that they will switch to something modern like jiti: cypress-io/cypress#30718 |
Beta Was this translation helpful? Give feedback.
-
|
Yes I saw you issue in Cypress, thank you :) Fortunately I found a workaround to both this problem and the one mentionned in this issue |
Beta Was this translation helpful? Give feedback.
-
|
Has anyone using TS had any luck getting error: |
Beta Was this translation helpful? Give feedback.
-
|
It's not just that particular plugin, I have similar issues with lots of different plugins (unplugin-vue-i18n, vite-plugin-checker, unplugin-vue-components, unplugin-auto-import), each seems to have its little quirks regarding ts typings. I think it has something to do with the new Vite Environment API and some changes that happened on the type definitions. |
Beta Was this translation helpful? Give feedback.
-
|
Please verify if you have any |
Beta Was this translation helpful? Give feedback.
-
|
@yusufkandemir In my situation I am trying the new q-app in a fresh monorepo but without Meanwhile I managed to find the culprit, which I think is |
Beta Was this translation helpful? Give feedback.
-
|
For info, this appears to be fixed in @quasar/app-vite-v2.0.0 due to updated dependencies. |
Beta Was this translation helpful? Give feedback.
-
Important update: 2024/12/04quasar/app-vite v2.0.0 (stable) & quasar/app-webpack v4.0.0 (stable) have been released!
Thank you to all who have helped test the new CLIs throughout the beta & rc stages! |
Beta Was this translation helpful? Give feedback.
-
|
Will do, for sure! Currently trying to regain some energy 😄 |
Beta Was this translation helpful? Give feedback.
-
|
For those reading, help us help you by asking your companies to take a look at https://donate.quasar.dev 🤓 |
Beta Was this translation helpful? Give feedback.
-
|
awesome! thank you for all the hard work again!!! |
Beta Was this translation helpful? Give feedback.
-
|
@rstoenescu and team: congratulations for the release! The new app looks damn good! 👌 |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for the great upgrade guides! |
Beta Was this translation helpful? Give feedback.
-
|
Just updated my project to app-webpack 4.0.0 and currently dealing with this problem: Had followed through the upgrade guide |
Beta Was this translation helpful? Give feedback.
-
|
I experience the same issue, disable it for now, but maybe one day it could be fixed or somebody finds out what is wrong in an old upgraded project as I use also. |
Beta Was this translation helpful? Give feedback.
-
|
Please try this and let me know if it works: // the order is important
{
files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.vue'],
rules: {
// move the rule from below to here, it should not be specified anywhere else
'@typescript-eslint/consistent-type-imports': [
'error',
{ prefer: 'type-imports' }
],
}
},
...vueTsEslintConfig({
// ...
extends: ['recommendedTypeChecked'] // recommended -> recommendTypeChecked
}), |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your reply. I setup according to this guide: https://quasar.dev/quasar-cli-vite/linter#eslint-configuration-file Your post indicated the order is important, so I moved the block {languageOptions .... } before ...vueTsEslintConfig as suggested by you. Following is my eslint.config.js for reference: import js from '@eslint/js';
import globals from 'globals';
import pluginVue from 'eslint-plugin-vue';
import pluginQuasar from '@quasar/app-vite/eslint';
import vueTsEslintConfig from '@vue/eslint-config-typescript';
// the following is optional, if you want prettier too:
import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting';
export default [
{
/**
* Ignore the following files.
* Please note that pluginQuasar.configs.recommended() already ignores
* the "node_modules" folder for you (and all other Quasar project
* relevant folders and files).
*
* ESLint requires "ignores" key to be the only one in this object
*/
ignores: ['/node_modules'],
},
...pluginQuasar.configs.recommended(),
js.configs.recommended,
/**
* https://eslint.vuejs.org
*
* pluginVue.configs.base
* -> Settings and rules to enable correct ESLint parsing.
* pluginVue.configs[ 'flat/essential']
* -> base, plus rules to prevent errors or unintended behavior.
* pluginVue.configs["flat/strongly-recommended"]
* -> Above, plus rules to considerably improve code readability and/or dev experience.
* pluginVue.configs["flat/recommended"]
* -> Above, plus rules to enforce subjective community defaults to ensure consistency.
*/
...pluginVue.configs['flat/recommended'],
{
languageOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
globals: {
...globals.browser,
...globals.node, // SSR, Electron, config files
process: 'readonly', // process.env.*
ga: 'readonly', // Google Analytics
cordova: 'readonly',
Capacitor: 'readonly',
chrome: 'readonly', // BEX related
browser: 'readonly', // BEX related
},
// parserOptions: {
// projectService: true,
// tsconfigRootDir: import.meta.dirname,
// },
},
// add your custom rules here
rules: {
// disable type linting for now until solution avail:
// https://github.com/quasarframework/quasar/discussions/16877#discussioncomment-11471186
'@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
'prefer-promise-reject-errors': 'off',
// allow debugger during development only
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
},
// https://github.com/vuejs/eslint-config-typescript
...vueTsEslintConfig({
// Optional: extend additional configurations from typescript-eslint'.
// Supports all the configurations in
// https://typescript-eslint.io/users/configs#recommended-configurations
extends: [
// By default, only the recommended rules are enabled.
'recommended',
// 'recommendedTypeChecked',
// You can also manually enable the stylistic rules.
'stylistic',
// Other utility configurations, such as 'eslintRecommended', (note that it's in camelCase)
// are also extendable here. But we don't recommend using them directly.
],
}),
{
files: ['src-pwa/custom-service-worker.ts'],
languageOptions: {
globals: {
...globals.serviceworker,
},
},
},
prettierSkipFormatting, // optional, if you want prettier
]; |
Beta Was this translation helpful? Give feedback.
-
@yusufkandemir Thanks! It actually works |
Beta Was this translation helpful? Give feedback.
-
thank you that did it! |
Beta Was this translation helpful? Give feedback.
-
|
I had set up a new project using app-vite 2.0 today and also added vitest support according to the docs. However the
Has anyone else encountered these problems? Besides this, everything worked fine, so great work! :) |
Beta Was this translation helpful? Give feedback.
-
|
I also had this problem and for me it was because of conflicting vite versions. One of the plugins I used resolved to vite v3 while all the rest resolved to v5 or v6 which caused issues when running vitest. You can check your vite versions used in your project with |
Beta Was this translation helpful? Give feedback.
-
|
Only Vite 5 and 6. :( Furthermore vitest cannot resolve the quasar folder aliases as well as my custom folder aliases. They are defined inside .quasar/tsconfig.json and the tsconfig.json in my project root extends this file. |
Beta Was this translation helpful? Give feedback.
-
|
I just checked the vitest releases and saw, that 2.1.6 introduced Vite 6 support and this was reverted in version 2.1.7 which I was using. Since the breaking changes caused by Vite 6 don't affect me, I just went back to 2.1.6 and now the error is gone for now. :) |
Beta Was this translation helpful? Give feedback.
-
|
You can just add this to your package.json: "overrides": {
"vitest": {
"vite": "^6.0.0"
},
"@vitest/mocker": {
"vite": "^6.0.0"
}
}Didn't cause any trouble on my side |
Beta Was this translation helpful? Give feedback.
-
|
They specify in the 2.1.7 release note that it's still compatible |
Beta Was this translation helpful? Give feedback.
-
|
Hi, Created a standard Quasar webpack example app with npm init quasar@latest as per https://quasar.dev/start/quick-start Run quasar dev and it fails with the following error. Expectation was it would work out of the box? |
Beta Was this translation helpful? Give feedback.
-
|
Fixed. Will be available in q/app-webpack v4.0.2 |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! That will be when(ish)? |
Beta Was this translation helpful? Give feedback.
-
|
Just released it. |
Beta Was this translation helpful? Give feedback.
-
|
You're a boss, thanks! |
Beta Was this translation helpful? Give feedback.
-
|
I have a "dumb" question on env files. I have Quasar Webpack V4 now working ok. Previously I had a .env file with dev keys, and in the quasar.config I had the following for production, which were connected at build time on Vercel through their environment variables: How do I do that now, considering env files are not uploaded to github? https://quasar.dev/quasar-cli-webpack/upgrade-guide#the-env-dotfiles-support implies they should be removed totally from quasar.config, so I'm a confused here about staging/production deployments. |
Beta Was this translation helpful? Give feedback.
-
|
@sonicviz The information was already in the docs: |
Beta Was this translation helpful? Give feedback.
-
|
You just need to let your imagination free with the quasar.config file :) |
Beta Was this translation helpful? Give feedback.
-
|
I've seen that already, and I tried that with ctx.prod but it doesn't work because of the current order, as explained by #16877 (reply in thread) This is my env section, that works fine in QWebapck V3. As near as I can determine, your example will still not work then. Unless I'm missing something still? I am a bit thick at times, being Australian😂 Or are you just confirming it's fixed in 2.0.3 and try as per your example? |
Beta Was this translation helpful? Give feedback.
-
|
This still doesn't work in Quasar Webpack 4.0.4 If your new system works as you say, can you please outline how to do what I've been trying to communicate is now broken, which is a common use case: use host environment variables to set the the process.env api keys that an app needs to initialize itself. If it's not, can you clearly outline an example of how to do it because I cannot figure it out from the documentation you have. Even the new envfilter doesn't make sense to me for this common multi-environment deployment use case (Local/Production, which is what we are limited to with Quasar atm). This still works fine in Quasar Webpack V3, as explained. I don't need to do this comment/uncomment dance with env {} every time I do a commit. Integrating dotenv is the root cause of this somehow, as the initialization order of process.env seems to have changes, which is why I now need to do this comment/uncomment process, which is plain silly. If there's a better way that I can just set and forget (as in V3) please show me, I'm all ears. Thanks. |
Beta Was this translation helpful? Give feedback.
-
|
I'm not familiar with the Quasar source, but taking a poke through it I guess the issue must be with This appears to be new Quasar replacement for dotenv, but I can't see where the env {} section is referenced. In V3 it's dotenv package that is taking care of this loading of env variables into process.env (see below quote), and because it's not being done at all in V4 that's why the env {} process.env keys are now undefined doing local Quasar Dev. Update: Looking at dotenv package description is instructive, and supports my conclusion above. |
Beta Was this translation helpful? Give feedback.
-
|
Let me phrase this another way, in case you don't understand. Previously (pre webpack V4) we had two ways to deploy to vercel (as an example, any host is similar):
It appears you can no longer do method number 2, which is a problem because a CI process is really preferable over Vercel CLI or similar methods for other hosts. CI is the standard. So my issue is if the quasar.config env keys method no longer works what is the replacement method for doing a CI deployment process? I know you can have all sorts of .env files as explained here https://quasar.dev/quasar-cli-webpack/upgrade-guide#the-env-dotfiles-support but the standard is you don't upload ANY env file to gitbub even if the repo is private. That's basic security. So the ability to specify your env keys in Quasar.config using process.env (which was the advised method from the docs btw) seemed to be an elegant solution for CI use cases but does not appear to work post V4. This is a big deal because it's a key (as in critical but also key key!) deployment and security issue. @rstoenescu Any thoughts? I don't think I'm off base here, happy to be corrected if I am. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Hi. I fail to see why the new method does not works for you. Maybe its the name of your env files? And if so, why not specify yours through the quasar.config file as told in docs. Worst case, use your old method of injecting through quasar.config > build > env. |
Beta Was this translation helpful? Give feedback.
-
|
I've ran into another issue when updating my tsconfig.json to use This is my This is our We're getting errors such as the below, when using Essentially, TS doesn't know that Prior to the app-vite upgrade, we had a However, the migration guide deleted this file and now the file is apparently generated in My question is, how should I address this? I can re-add the file to 'fix' these types by making modelValue not required. Would it be better for me to PR this in the type files themselves? is there a better approach? |
Beta Was this translation helpful? Give feedback.
-
|
It only had the part until |
Beta Was this translation helpful? Give feedback.
-
|
Cheers @yusufkandemir, I added the interfaces to |
Beta Was this translation helpful? Give feedback.
-
|
You shouldn't add them to |
Beta Was this translation helpful? Give feedback.
and others
-
Hello beautiful people,
We have made two big releases today:
There are a TON of improvements and new features and we'd like your help to test them thoroughly. The more people get engaged, the faster we can get them out the "beta". We've been working on these new CLIs for a very LONG time!
Release notes: q/app-vite and q/app-webpack
The documentation website has been updated and it now has two new pages (both called "Upgrade guide") under the "Quasar with Vite/Webpack" menu sections. If you don't see them right away, allow time for the docs PWA to update.
Any constructive feedback is appreciated.
Enjoy!
Important update: 2024/12/04
quasar/app-vite v2.0.0 (stable) & quasar/app-webpack v4.0.0 (stable) have been released!
Enjoy and make sure that you read and apply the upgrade guide thoroughly!
Thank you to all who have helped test the new CLIs throughout the beta & rc stages!
Important update: 2024/11/27
We have finalized the final q/app-vite v2.0.0 & q/app-webpack v4.0.0 (both have a few fixes on top of rc.4) and we are now writing the docs (q/app-vite is done, q/app-webpack needs a bit more work). Expect the release in a few more days. The docs for the legacy apps (q/app-vite v1 & q/app-webpack v3) will be moved to a dedicated website (legacy-app.quasar.dev) and the main docs (quasar.dev) will have only information related to the newer CLIs.
Important update: 2024/11/16
Release Candidate versions for both q/app-vite & q/app-webpack are here! No further breaking changes are planned.
Important update: 2024/11/08
The next q/app-vite v2 (beta.25) will come with Vite 6 (today or tomorrow). There will be one more beta next week and then we are shipping the stable version (or skip the next beta altogether... we're almost there!). Again, sorry for the delay, but just remember that this is not only a Vite upgrade from 2 to 6. It comes with a lot of new and very important features.
Important update: 2024/11/06
We would have released the new q/app-s (I think that you are referring to them) last week if I didn't get a breakthrough very recently for the BEX mode (HMR for Chrome! is one of them).
On the fact that "it takes too much time": this is always the case when we are taking a big leap forward (UI or CLI) and lots of research is needed. The development appears to slow down. However, in reality it's quite the opposite. Every. Time. The new CLIs are such a major improvement and the work we are putting into them was and is so insane that you, the community, would not believe it. Like with the previous major releases, we want to ship the best product ever, and it takes time. We also don't want to get "aaah, but this fix will make a breaking change" type of moments (and then release another major version). CLI development is hard. We're doing things no one else has. The ESM changes have huge implications and that's why testing & feedback from the community is really important. What worsened the situation for the new CLIs is that we started with a plan that kept on changing due to the ecosystem (the rapid release of Vite 3, 4 & 5 is one of the reasons).
In any case, this week we will release the final beta (take it as an RC too) for both the CLIs and then things will get back to what you were used to before.
PS: For those working at companies using Quasar, we would really appreciate if you could ask your employers to sponsor/donate to Quasar. It would mean quite a lot for us and it would speed up the development. https://donate.quasar.dev
Important update: 2024/08/15
After upgrading to quasar/app-vite v2 beta.19+ & quasar/app-webpack v4 beta.20+, please take the action below:
Action to take
The feature flag files must be deleted from your project folder. They need to be generated again (will happen automatically).
Using
rimrafthroughnpx(orpnpx,yarn dlx,bunx)Unix-like (Linux, macOS):
Windows (CMD):
Windows (PowerShell):
Explanation
#17301 changes
moduleResolutionfromnodetobundler. That broke the feature flags system. Here is an example common error:It's because even though TS normally doesn't enforce the file extension inside the app code and imports from node_modules when using
bundler, it does enforce it for wildcardpackage.json > exportsentries. So,quasar/dist/types/feature-flagno longer works and must be changed toquasar/dist/types/feature-flag.d.tsinstead.This change will only apply to feature flags generated after the release of this. So, existing projects will only benefit from it when they add Pinia or build modes, OR delete the feature flag files and run
quasar dev/quasar buildto re-generate them. New projects will work fine.Beta Was this translation helpful? Give feedback.
All reactions