New major versions of q/app-vite and q/app-webpack - in BETA #16877
Replies: 9 comments 13 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.
-
@rstoenescu Yet any plans when |
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.
-
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.
-
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.
-
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!
Beta Was this translation helpful? Give feedback.
All reactions