feat(docs): q/app-vite - update linter & handling vite plugins pages

create-quasar/templates/app/quasar-v2/js-vite-beta/index.js

@@ -16,7 +16,7 @@ export async function script ({ scope, utils }) {
       name: 'preset',
       message: 'Check the features needed for your project:',
       choices: [
-        { title: 'vite-plugin-checker (ESLint)', value: 'lint', description: 'recommended', selected: true },
+        { title: 'Linting (vite-plugin-checker + ESLint)', value: 'lint', description: 'recommended', selected: true },
         { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
         { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' },
         { title: 'axios', value: 'axios' },

create-quasar/templates/app/quasar-v2/js-vite/index.js

@@ -16,7 +16,7 @@ export async function script ({ scope, utils }) {
       name: 'preset',
       message: 'Check the features needed for your project:',
       choices: [
-        { title: 'vite-plugin-checker (ESLint)', value: 'lint', description: 'recommended', selected: true },
+        { title: 'Linting (vite-plugin-checker + ESLint)', value: 'lint', description: 'recommended', selected: true },
         { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
         { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' },
         { title: 'axios', value: 'axios' },

create-quasar/templates/app/quasar-v2/js-webpack-beta/index.js

@@ -16,11 +16,11 @@ export async function script ({ scope, utils }) {
       name: 'preset',
       message: 'Check the features needed for your project:',
       choices: [
-        { title: 'ESLint', value: 'lint', description: 'recommended', selected: true },
+        { title: 'Linting (ESLint)', value: 'lint', description: 'recommended', selected: true },
         { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
         { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' },
-        { title: 'Axios', value: 'axios' },
-        { title: 'Vue-i18n', value: 'i18n' }
+        { title: 'axios', value: 'axios' },
+        { title: 'vue-i18n', value: 'i18n' }
       ],
       format: values => {
         let result = values

create-quasar/templates/app/quasar-v2/js-webpack/index.js

@@ -16,11 +16,11 @@ export async function script ({ scope, utils }) {
       name: 'preset',
       message: 'Check the features needed for your project:',
       choices: [
-        { title: 'ESLint', value: 'lint', description: 'recommended', selected: true },
+        { title: 'Linting (ESLint)', value: 'lint', description: 'recommended', selected: true },
         { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
         { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' },
-        { title: 'Axios', value: 'axios' },
-        { title: 'Vue-i18n', value: 'i18n' }
+        { title: 'axios', value: 'axios' },
+        { title: 'vue-i18n', value: 'i18n' }
       ],
       format: values => {
         let result = values

create-quasar/templates/app/quasar-v2/ts-vite-beta/index.js

@@ -28,7 +28,7 @@ export async function script ({ scope, utils }) {
       name: 'preset',
       message: 'Check the features needed for your project:',
       choices: [
-        { title: 'vite-plugin-checker (ESLint + vue-tsc)', value: 'lint', description: 'recommended', selected: true },
+        { title: 'Linting (vite-plugin-checker + ESLint + vue-tsc)', value: 'lint', description: 'recommended', selected: true },
         { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
         { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' },
         { title: 'axios', value: 'axios' },

create-quasar/templates/app/quasar-v2/ts-vite/index.js

@@ -28,7 +28,7 @@ export async function script ({ scope, utils }) {
       name: 'preset',
       message: 'Check the features needed for your project:',
       choices: [
-        { title: 'vite-plugin-checker (ESLint + vue-tsc)', value: 'lint', description: 'recommended', selected: true },
+        { title: 'Linting (vite-plugin-checker + ESLint + vue-tsc)', value: 'lint', description: 'recommended', selected: true },
         { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
         { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' },
         { title: 'axios', value: 'axios' },

create-quasar/templates/app/quasar-v2/ts-webpack-beta/index.js

@@ -28,11 +28,11 @@ export async function script ({ scope, utils }) {
       name: 'preset',
       message: 'Check the features needed for your project:',
       choices: [
-        { title: 'ESLint', value: 'lint', description: 'recommended', selected: true },
+        { title: 'Linting (ESLint)', value: 'lint', description: 'recommended', selected: true },
         { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
         { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' },
-        { title: 'Axios', value: 'axios' },
-        { title: 'Vue-i18n', value: 'i18n' }
+        { title: 'axios', value: 'axios' },
+        { title: 'vue-i18n', value: 'i18n' }
       ],
       format: values => {
         let result = values

create-quasar/templates/app/quasar-v2/ts-webpack/index.js

@@ -28,11 +28,11 @@ export async function script ({ scope, utils }) {
       name: 'preset',
       message: 'Check the features needed for your project:',
       choices: [
-        { title: 'ESLint', value: 'lint', description: 'recommended', selected: true },
+        { title: 'Linting (ESLint)', value: 'lint', description: 'recommended', selected: true },
         { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
         { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' },
-        { title: 'Axios', value: 'axios' },
-        { title: 'Vue-i18n', value: 'i18n' }
+        { title: 'axios', value: 'axios' },
+        { title: 'vue-i18n', value: 'i18n' }
       ],
       format: values => {
         let result = values

docs/src/pages/quasar-cli-vite/handling-vite.md

@@ -9,9 +9,9 @@ The build system uses [Vite](https://vitejs.dev) to create the UI of your websit
 
 ## Updating Vite config
 
-You may have noticed that the `vite.config.js`/`vite.config.ts` file does not exist in your Quasar CLI with Vite project. This is because Quasar CLI generates the Vite configuration for you so that you don't have to worry about it.
+You may have noticed that the `vite.config.js` / `vite.config.ts` file does not exist in your Quasar CLI with Vite project. This is because Quasar CLI generates the Vite configuration for you so that you don't have to worry about it.
 
-In case you need to tweak it, you can do so through `quasar.config file > build > extendViteConf` like so:
+In case you need to tweak it, you can do so through quasar.config file > build > extendViteConf like so:
 
 ```js /quasar.config file
 // use mergeConfig helper to avoid overwriting the default config
@@ -66,32 +66,48 @@ $ quasar inspect -h
     --help, -h       Displays this message
 ```
 
-## Adding Vite plugins
+## Adding Vite plugins <q-badge label="@quasar/app-vite 1.8+" />
 
 Make sure to yarn/npm install the vite plugin package that you want to use, then edit the `/quasar.config` file:
 
-```js
+```js /quasar.config file
 build: {
   vitePlugins: [
-    [ '<plugin-name>', { /* plugin options */ } ]
+    // both are perfectly equivalent:
+    [ '<plugin-name>', { /* plugin options */ } ],
+    [ '<plugin-name>', { /* plugin options */ }, { server: true, client: true } ]
+  ]
+}
+```
+
+You can disable a plugin on the client-side or the server-side, which is especially useful when developing a SSR app:
+
+```js /quasar.config file
+build: {
+  vitePlugins: [
+    // disable on the server-side:
+    [ '<plugin-name>', { /* plugin options */ }, { server: false } ],
+
+    // disable on the client-side:
+    [ '<plugin-name>', { /* plugin options */ }, { client: false } ]
   ]
 }
 ```
 
 There are multiple syntaxes supported:
 
-```js
+```js /quasar.config file
 vitePlugins: [
-  [ '<plugin1-name>', { /* plugin1 options */ } ],
-  [ '<plugin2-name>', { /* plugin2 options */ } ],
+  [ '<plugin1-name>', { /* plugin1 options */ }, { server: true, client: true } ],
+  [ '<plugin2-name>', { /* plugin2 options */ }, { server: true, client: true } ],
   // ...
 ]
 
 // or:
 
 vitePlugins: [
-  [ require('<plugin1-name>'), { /* plugin1 options */ } ],
-  [ require('<plugin2-name>'), { /* plugin2 options */ } ],
+  [ require('<plugin1-name>'), { /* plugin1 options */ }, { server: true, client: true } ],
+  [ require('<plugin2-name>'), { /* plugin2 options */ }, { server: true, client: true } ],
   // ...
 ]
 

docs/src/pages/quasar-cli-vite/linter.md

@@ -1,7 +1,8 @@
 ---
-title: ESLint
+title: Linter
 desc: (@quasar/app-vite) How to configure a code linter in a Quasar app.
 ---
+
 Having a code linter (like [ESLint](https://eslint.org/)) in place is highly recommended and ensures your code looks legible. It also helps you capture some errors before even running the code.
 
 When you scaffold a Quasar project folder it will ask you if you want a linter and which setup you want for ESLint:
@@ -18,25 +19,24 @@ Two dot files will be created:
 
 Further extension of one of the ESLint setups above can be made. Your project will by default use `eslint-plugin-vue` to handle your Vue files. Take a quick look at `/.eslintrc.cjs` and notice it:
 
-```js
+```js /.eslintrc.cjs
 extends: [
   // https://eslint.vuejs.org/rules/#priority-a-essential-error-prevention-for-vue-js-3-x
   // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
   'plugin:vue/strongly-recommended'
 ]
 ```
 
-If you chose ESLint when creating your project folder, you'll also notice that the `eslint` key is added to the `/quasar.config` file:
+Also note that you need the following file:
 
-```js /quasar.config file
-eslint: {
-  // fix: true,
-  // include: [],
-  // exclude: [],
-  // rawOptions: {},
-  warnings: true,
-  errors: true
-},
+```bash /.eslintignore
+/dist
+/src-capacitor
+/src-cordova
+/.quasar
+/node_modules
+.eslintrc.cjs
+/quasar.config.*.temporary.compiled*
 ```
 
 ## Lint Rules
@@ -77,7 +77,137 @@ Example of ESLint rules below:
 }
 ```
 
-## Disabling Linter
+## Typescript projects linting
+
+The linting for a TS project is based on vite-plugin-checker + ESLint + vue-tsc:
+
+```tabs
+<<| bash Yarn |>>
+$ yarn add --dev vite-plugin-checker vue-tsc@^1.0.0 typescript@~5.3.0
+<<| bash NPM |>>
+$ npm install --save-dev vite-plugin-checker vue-tsc@^1.0.0 typescript@~5.3.0
+<<| bash PNPM |>>
+$ pnpm add -D vite-plugin-checker vue-tsc@^1.0.0 typescript@~5.3.0
+<<| bash Bun |>>
+$ bun add --dev vite-plugin-checker vue-tsc@^1.0.0 typescript@~5.3.0
+```
+
+::: warning
+Notice the `typescript` dependency is <= 5.3. There is currently an issue with ESLint and newer TS (5.4+). This is only a temporary thing until upstream fixes it.
+:::
+
+Create a file called `tsconfig-vue-tsc.json` in the root of your project folder:
+
+```json /tsconfig-vue-tsc.json
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "skipLibCheck": true
+  }
+}
+```
+
+```js /quasar.config file
+build: {
+  vitePlugins: [
+    ['vite-plugin-checker', {
+      vueTsc: {
+        tsconfigPath: 'tsconfig-vue-tsc.json'
+      },
+      eslint: {
+        lintCommand: 'eslint "./**/*.{js,ts,mjs,cjs,vue}"'
+      }
+    }, { server: false }]
+  ]
+}
+```
+
+## Javascript projects linting
+
+The linting for a JS project is based on vite-plugin-checker + ESLint:
+
+```tabs
+<<| bash Yarn |>>
+$ yarn add --dev vite-plugin-checker
+<<| bash NPM |>>
+$ npm install --save-dev vite-plugin-checker
+<<| bash PNPM |>>
+$ pnpm add -D vite-plugin-checker
+<<| bash Bun |>>
+$ bun add --dev vite-plugin-checker
+```
+
+```js /quasar.config file
+build: {
+  vitePlugins: [
+    ['vite-plugin-checker', {
+      eslint: {
+        lintCommand: 'eslint "./**/*.{js,mjs,cjs,vue}"'
+      }
+    }, { server: false }]
+  ]
+}
+```
+
+## quasar.config file > eslint <q-badge label="deprecated" />
+
+::: warning
+The property described below has been deprecated in favour of using vite-plugin-checker.
+:::
+
+If you chose ESLint when creating your project folder, you'll also notice that the `eslint` key is added to the `/quasar.config` file:
+
+```js /quasar.config file
+eslint: {
+  // fix: true,
+  // include: [],
+  // exclude: [],
+  // rawOptions: {},
+  warnings: true,
+  errors: true
+},
+```
+
+```js /quasar.config file > eslint
+/** Options with which Quasar CLI will use ESLint */
+eslint?: QuasarEslintConfiguration;
+
+interface QuasarEslintConfiguration {
+  /**
+   * Should it report warnings?
+   * @default true
+   */
+  warnings?: boolean;
+
+  /**
+   * Should it report errors?
+   * @default true
+   */
+  errors?: boolean;
+
+  /**
+   * Fix on save
+   */
+  fix?: boolean;
+
+  /**
+   * Raw options to send to ESLint
+   */
+  rawOptions?: object;
+
+  /**
+   * Files to include (can be in glob format)
+   */
+  include?: string[];
+
+  /**
+   * Files to exclude (can be in glob format).
+   * Recommending to use .eslintignore file instead.
+   */
+  exclude?: string[];
+}
+```
+
 In order for you to disable ESLint later, all you need to do is to:
 
 1. Comment out (or remove) the key below: