New major versions of q/app-vite and q/app-webpack - in BETA #16877
Replies: 7 comments 9 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.
-
|
We've specified vue-tsc 1 (both in the project scaffolding and in docs) because of this: fi3ework/vite-plugin-checker#306 You can upgrade to vue-tsc 2 when that issue is resolved. Might be good to drop me a message about when that happens too (here or Discord). Will add the option for Electron to compile to cjs on the todo list, but I must mention that there's currently no bandwidth for it, so you might need to wait for it for a while... |
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.
-
|
@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.
-
|
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.
-
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