├── .gitignore ├── render-function ├── src │ ├── templates │ │ ├── .gitkeep │ │ └── pages │ │ │ └── SpecialPage.vue │ ├── index.js │ └── install.js ├── .gitignore ├── README.md └── package.json ├── my-starter-kit ├── src │ ├── templates │ │ ├── serviceA │ │ │ └── src │ │ │ │ └── services │ │ │ │ └── serviceA.js │ │ ├── common-files │ │ │ ├── README.md │ │ │ └── some-folder │ │ │ │ └── tasks.md │ │ └── serviceB │ │ │ └── src │ │ │ └── services │ │ │ └── serviceB.js │ ├── boot │ │ └── my-starter-kit-boot.js │ ├── uninstall.js │ ├── install.js │ ├── prompts.js │ └── index.js ├── .gitignore ├── package.json └── README.md ├── my-component ├── src │ ├── component │ │ ├── MyComponent.sass │ │ └── MyComponent.vue │ ├── boot │ │ └── register-my-component.js │ └── index.js ├── .gitignore ├── README.md └── package.json ├── chain-webpack ├── .gitignore ├── README.md ├── package.json └── src │ └── index.js ├── my-directive ├── .gitignore ├── src │ ├── component │ │ └── my-directive.js │ ├── boot │ │ └── register-my-directive.js │ └── index.js ├── README.md └── package.json ├── inject-quasar-plugin ├── .gitignore ├── README.md ├── package.json └── src │ └── index.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /render-function/src/templates/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /my-starter-kit/src/templates/serviceA/src/services/serviceA.js: -------------------------------------------------------------------------------- 1 | // we do something... 2 | -------------------------------------------------------------------------------- /my-component/src/component/MyComponent.sass: -------------------------------------------------------------------------------- 1 | .my-component__text 2 | font-size: 2rem 3 | -------------------------------------------------------------------------------- /my-starter-kit/src/templates/common-files/README.md: -------------------------------------------------------------------------------- 1 | Hey, we changed the README.md file! 2 | -------------------------------------------------------------------------------- /render-function/src/templates/pages/SpecialPage.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /my-starter-kit/src/templates/common-files/some-folder/tasks.md: -------------------------------------------------------------------------------- 1 | ## List of tasks 2 | 3 | 1. Something 4 | 2. Something else 5 | -------------------------------------------------------------------------------- /my-starter-kit/src/templates/serviceB/src/services/serviceB.js: -------------------------------------------------------------------------------- 1 | // we do something... 2 | 3 | console.log('<%= productName %>') 4 | -------------------------------------------------------------------------------- /my-starter-kit/src/boot/my-starter-kit-boot.js: -------------------------------------------------------------------------------- 1 | // our own boot file; 2 | // we do something here... 3 | 4 | console.log('Running my-starter-kit boot file') 5 | -------------------------------------------------------------------------------- /chain-webpack/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .thumbs.db 3 | node_modules 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /my-component/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .thumbs.db 3 | node_modules 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /my-directive/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .thumbs.db 3 | node_modules 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /my-starter-kit/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .thumbs.db 3 | node_modules 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /my-component/src/boot/register-my-component.js: -------------------------------------------------------------------------------- 1 | import MyComponent from '../component/MyComponent.vue' 2 | 3 | export default ({ app }) => { 4 | // we globally register our component in the app 5 | app.component('my-component', MyComponent) 6 | } 7 | -------------------------------------------------------------------------------- /render-function/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .thumbs.db 3 | node_modules 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /inject-quasar-plugin/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .thumbs.db 3 | node_modules 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /my-component/src/component/MyComponent.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | -------------------------------------------------------------------------------- /my-directive/src/component/my-directive.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // ...plus any other Vue directive methods 3 | 4 | mounted (el, binding) { 5 | // do something 6 | }, 7 | 8 | updated (el, binding) { 9 | // do something 10 | }, 11 | 12 | beforeUnmount (el, binding) { 13 | // do something 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /render-function/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Quasar App Extension index/runner script 3 | * (runs on each dev/build) 4 | * 5 | * Docs: https://quasar.dev/app-extensions/development-guide/index-api 6 | * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/IndexAPI.js 7 | */ 8 | 9 | module.exports = function (api) { 10 | } 11 | -------------------------------------------------------------------------------- /my-component/README.md: -------------------------------------------------------------------------------- 1 | ## Quasar App Extension MyComponent 2 | 3 | This is an example of a Quasar App Extension that injects a custom component into the hosting Quasar app. 4 | 5 | Take into the account that for this example, the `ext-id` of this App Extension is `my-component` (this can be anything, and please do change it for a more appropriate name for your App Extension). 6 | 7 | -------------------------------------------------------------------------------- /my-directive/README.md: -------------------------------------------------------------------------------- 1 | ## Quasar App Extension MyDirective 2 | 3 | This is an example of a Quasar App Extension that injects a custom directive into the hosting Quasar app. 4 | 5 | Take into the account that for this example, the `ext-id` of this App Extension is `my-directive` (this can be anything, and please do change it for a more appropriate name for your App Extension). 6 | 7 | -------------------------------------------------------------------------------- /render-function/README.md: -------------------------------------------------------------------------------- 1 | ## Quasar App Extension RenderFunction 2 | 3 | This is an example of a Quasar App Extension that use the API Render function to copy directly to the hosting apps folders. 4 | 5 | Take into the account that for this example, the `ext-id` of this App Extension is `render-function` (this can be anything, and please do change it for a more appropriate name for your App Extension). 6 | 7 | -------------------------------------------------------------------------------- /my-directive/src/boot/register-my-directive.js: -------------------------------------------------------------------------------- 1 | import MyDirective from '../component/my-directive.js' 2 | 3 | export default ({ app }) => { 4 | // We globally register our directive with Vue; 5 | // Rememeber that all directives in Vue will start with 'v-' 6 | // but that should not be part of your directive name 7 | // https://vuejs.org/v2/guide/custom-directive.html 8 | // 'my-directive' will be used as 'v-my-directive' 9 | app.directive('my-directive', MyDirective) 10 | } 11 | -------------------------------------------------------------------------------- /inject-quasar-plugin/README.md: -------------------------------------------------------------------------------- 1 | ## Quasar App Extension MyComponent 2 | 3 | This is an example of a Quasar App Extension that injects a custom component and a Quasar Plugin into the hosting Quasar app. In this case, we'll be injecting the [AppVisibility](https://quasar.dev/quasar-plugins/app-visibility) plugin for use by our App Extension. 4 | 5 | Take into the account that for this example, the `ext-id` of this App Extension is `inject-quasar-plugin` (this can be anything, and please do change it for a more appropriate name for your App Extension). 6 | 7 | -------------------------------------------------------------------------------- /chain-webpack/README.md: -------------------------------------------------------------------------------- 1 | ## Quasar App Extension MyComponent 2 | 3 | This is an example of a Quasar App Extension that injects a custom component into the hosting Quasar app. The App Extension requires some rules added to Webpack and chains them into the build. 4 | 5 | In this example, we will chain the `ware-loader` webpack plugin to load markdown files so they can be processed by the package `markdown-it`. 6 | 7 | Take into the account that for this example, the `ext-id` of this App Extension is `chain-webpack` (this can be anything, and please do change it for a more appropriate name for your App Extension). 8 | 9 | -------------------------------------------------------------------------------- /render-function/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar-app-extension-render-function", 3 | "version": "0.0.1", 4 | "private": true, 5 | "description": "Quasar App Extension which uses Install api.render", 6 | "author": "Razvan Stoenescu ", 7 | "license": "MIT", 8 | "main": "src/index.js", 9 | "scripts": { 10 | "test": "echo \"No test specified\" && exit 0" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/quasarframework/app-extension-examples" 15 | }, 16 | "bugs": "https://github.com/quasarframework/app-extension-examples/issues", 17 | "homepage": "https://quasar.dev", 18 | "engines": { 19 | "node": ">= 8.9.0", 20 | "npm": ">= 5.6.0", 21 | "yarn": ">= 1.6.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /my-component/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar-app-extension-my-component", 3 | "version": "0.0.1", 4 | "private": true, 5 | "description": "Quasar App Extension which injects a Vue component - MyComponent", 6 | "author": "Razvan Stoenescu ", 7 | "license": "MIT", 8 | "main": "src/index.js", 9 | "scripts": { 10 | "test": "echo \"No test specified\" && exit 0" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/quasarframework/app-extension-examples" 15 | }, 16 | "bugs": "https://github.com/quasarframework/app-extension-examples/issues", 17 | "homepage": "https://quasar.dev", 18 | "engines": { 19 | "node": ">= 8.9.0", 20 | "npm": ">= 5.6.0", 21 | "yarn": ">= 1.6.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /inject-quasar-plugin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar-app-extension-inject-quasar-plugin", 3 | "version": "0.0.1", 4 | "private": true, 5 | "description": "Quasar App Extension which injects a Quasar Plugin", 6 | "author": "Razvan Stoenescu ", 7 | "license": "MIT", 8 | "main": "src/index.js", 9 | "scripts": { 10 | "test": "echo \"No test specified\" && exit 0" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/quasarframework/app-extension-examples" 15 | }, 16 | "bugs": "https://github.com/quasarframework/app-extension-examples/issues", 17 | "homepage": "https://quasar.dev", 18 | "engines": { 19 | "node": ">= 8.9.0", 20 | "npm": ">= 5.6.0", 21 | "yarn": ">= 1.6.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /my-directive/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar-app-extension-my-directive", 3 | "version": "0.0.1", 4 | "private": true, 5 | "description": "Quasar App Extension which injects a Vue directive - v-my-directive", 6 | "author": "Razvan Stoenescu ", 7 | "license": "MIT", 8 | "main": "src/index.js", 9 | "scripts": { 10 | "test": "echo \"No test specified\" && exit 0" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/quasarframework/app-extension-examples" 15 | }, 16 | "bugs": "https://github.com/quasarframework/app-extension-examples/issues", 17 | "homepage": "https://quasar.dev", 18 | "engines": { 19 | "node": ">= 8.9.0", 20 | "npm": ">= 5.6.0", 21 | "yarn": ">= 1.6.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /my-starter-kit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar-app-extension-my-starter-kit", 3 | "version": "0.0.1", 4 | "description": "Quasar App Extension MyStarterKit", 5 | "author": "Razvan Stoenescu ", 6 | "license": "MIT", 7 | "main": "src/index.js", 8 | "scripts": { 9 | "test": "echo \"No test specified\" && exit 0" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/quasarframework/app-extension-examples" 14 | }, 15 | "bugs": "https://github.com/quasarframework/app-extension-examples/issues", 16 | "homepage": "https://quasar.dev", 17 | "engines": { 18 | "node": ">= 8.9.0", 19 | "npm": ">= 5.6.0", 20 | "yarn": ">= 1.6.0" 21 | }, 22 | "dependencies": { 23 | "rimraf": "^3.0.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /my-starter-kit/README.md: -------------------------------------------------------------------------------- 1 | ## Quasar App Extension MyStarterKit 2 | 3 | This is essentially an example of a "starter kit" that adds stuff (/quasar.conf.js configuration, folders, files, CLI hooks) on top of the official starter kit. This allows you to have multiple projects sharing a common structure/logic (and only one package to manage them rather than having to change all projects individually to match your common pattern), and also allows you to share all this with the community. 4 | 5 | Take it as it really is. Just an example. It doesn't shows all things that you can do. We've only cherry-picked the most used ones. 6 | 7 | Take into the account that for this example, the `ext-id` of this App Extension is `my-starter-kit` (this can be anything, and please do change it for a more appropriate name for your App Extension). 8 | 9 | -------------------------------------------------------------------------------- /chain-webpack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar-app-extension-chain-webpack", 3 | "version": "0.0.1", 4 | "private": true, 5 | "description": "Quasar App Extension which adds something to Webpack config", 6 | "author": "Razvan Stoenescu ", 7 | "license": "MIT", 8 | "main": "src/index.js", 9 | "scripts": { 10 | "test": "echo \"No test specified\" && exit 0" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/quasarframework/app-extension-examples" 15 | }, 16 | "bugs": "https://github.com/quasarframework/app-extension-examples/issues", 17 | "homepage": "https://quasar.dev", 18 | "engines": { 19 | "node": ">= 8.9.0", 20 | "npm": ">= 5.6.0", 21 | "yarn": ">= 1.6.0" 22 | }, 23 | "devDependencies": { 24 | "markdown-it": "^9.1.0", 25 | "ware-loader": "^0.2.4" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /render-function/src/install.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Quasar App Extension install script 3 | * 4 | * Docs: https://quasar.dev/app-extensions/development-guide/install-api 5 | * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/InstallAPI.js 6 | */ 7 | 8 | const { existsSync } = require('fs') 9 | 10 | module.exports = function (api) { 11 | if (api.hasVite === true) { 12 | api.compatibleWith('@quasar/app-vite', '^1.0.0-alpha.0') 13 | } 14 | else { 15 | // should be "@quasar/app-webpack" but that is not backward compatible 16 | api.compatibleWith('@quasar/app', '^3.0.0') 17 | } 18 | 19 | let pageExists = false 20 | 21 | // we can use 'api.resolve.src' to see if "SpecialPage.vue already exists" 22 | // https://quasar.dev/app-extensions/development-guide/install-api#api.resolve 23 | if (existsSync(api.resolve.app('pages/SpecialPage.vue'))) { 24 | pageExists = true 25 | } 26 | 27 | // on subsequent installs, the user will be asked to overwrite this file 28 | api.render('./templates/pages') 29 | 30 | // if the page didn't originally exist, show a message 31 | // https://quasar.dev/app-extensions/development-guide/install-api#api.onExitLog 32 | api.onExitLog('Be sure to add "SpecialPage.vue" to your routes.') 33 | } 34 | -------------------------------------------------------------------------------- /my-starter-kit/src/uninstall.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Quasar App Extension uninstall script 3 | * 4 | * Docs: https://quasar.dev/app-extensions/development-guide/uninstall-api 5 | * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/UninstallAPI.js 6 | */ 7 | 8 | // we yarn added it to our App Extension, 9 | // so we can import the following: 10 | const rimraf = require('rimraf') 11 | 12 | module.exports = function (api) { 13 | // Careful when you remove folders! 14 | // You don't want to delete files that are still needed by the Project, 15 | // or files that are not owned by this app extension. 16 | 17 | 18 | // Here, we could also remove the /src/services folder altogether, 19 | // but what if the user has added other files into this folder? 20 | 21 | if (api.prompts.serviceA) { 22 | // we added it on install, so we remove it 23 | rimraf.sync(api.resolve.src('services/serviceA.js')) 24 | } 25 | 26 | if (api.prompts.serviceB) { 27 | // we added it on install, so we remove it 28 | rimraf.sync(api.resolve.src('services/serviceB.js')) 29 | } 30 | 31 | // we added it on install, so we remove it 32 | rimraf.sync(api.resolve.app('some-folder')) 33 | // warning... we've added this folder, but what if the 34 | // developer added more files into this folder??? 35 | } 36 | -------------------------------------------------------------------------------- /my-starter-kit/src/install.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Quasar App Extension install script 3 | * 4 | * Docs: https://quasar.dev/app-extensions/development-guide/install-api 5 | * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/InstallAPI.js 6 | */ 7 | 8 | /** 9 | * Take this as an example only. 10 | * We've cherry-picked just a few out of the many 11 | * things that you can do. 12 | */ 13 | 14 | module.exports = function (api) { 15 | // (Optional!) 16 | // Quasar compatibility check; you may need 17 | // hard dependencies, as in a minimum version of the "quasar" 18 | // package or a minimum version of Quasar App CLI 19 | api.compatibleWith('quasar', '^2.0.0') 20 | 21 | if (api.hasVite === true) { 22 | api.compatibleWith('@quasar/app-vite', '^1.0.0-alpha.0') 23 | } 24 | else { 25 | // should be "@quasar/app-webpack" but that is not backward compatible 26 | api.compatibleWith('@quasar/app', '^3.0.0') 27 | } 28 | 29 | // We render some files into the hosting project 30 | 31 | if (api.prompts.serviceA) { 32 | api.render('./templates/serviceA') 33 | } 34 | 35 | if (api.prompts.serviceB) { 36 | // we supply interpolation variables 37 | // to the template 38 | api.render('./templates/serviceB', { 39 | productName: api.prompts.productName 40 | }) 41 | } 42 | 43 | api.render('./templates/common-files') 44 | } 45 | -------------------------------------------------------------------------------- /my-directive/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Quasar App Extension index/runner script 3 | * (runs on each dev/build) 4 | * 5 | * Docs: https://quasar.dev/app-extensions/development-guide/index-api 6 | * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/IndexAPI.js 7 | */ 8 | 9 | function extendConf (conf, api) { 10 | // make sure my-ext boot file is registered 11 | conf.boot.push('~quasar-app-extension-my-directive/src/boot/register-my-directive.js') 12 | 13 | if (api.hasVite !== true) { 14 | // make sure boot & component files get transpiled 15 | conf.build.transpileDependencies.push(/quasar-app-extension-my-directive[\\/]src/) 16 | } 17 | } 18 | 19 | module.exports = function (api) { 20 | // (Optional!) 21 | // Quasar compatibility check; you may need 22 | // hard dependencies, as in a minimum version of the "quasar" 23 | // package or a minimum version of Quasar App CLI 24 | api.compatibleWith('quasar', '^2.0.0') 25 | 26 | if (api.hasVite === true) { 27 | api.compatibleWith('@quasar/app-vite', '^1.0.0-alpha.0') 28 | } 29 | else { 30 | // should be "@quasar/app-webpack" but that is not backward compatible 31 | api.compatibleWith('@quasar/app', '^3.0.0') 32 | } 33 | 34 | // Here we extend /quasar.conf.js, so we can add 35 | // a boot file which registers our new UI component; 36 | // "extendConf" will be defined below (keep reading the tutorial) 37 | api.extendQuasarConf(extendConf) 38 | } 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Quasar Framework logo](https://cdn.quasar.dev/logo-v2/header.png) 2 | 3 | # Quasar App Extension examples 4 | 5 | > Compatible with Quasar v2 (and Vue 3). 6 | > 7 | > This repo contains multiple examples of some very basic Quasar App Extensions. This is offered as a guide to help you build your own App Extensions. 8 | 9 | ## Supporting Quasar 10 | Quasar Framework is an MIT-licensed open source project. Its ongoing development is made possible thanks to the support by these awesome [backers](https://github.com/rstoenescu/quasar-framework/blob/dev/backers.md). 11 | 12 | **Please read our manifest on [Why donations are important](https://quasar.dev/why-donate)**. If you'd like to become a donator, check out [Quasar Framework's Donator campaign](https://donate.quasar.dev). 13 | 14 | ## Documentation 15 | 16 | Head on to the Quasar Framework official website: [https://quasar.dev](https://quasar.dev) 17 | 18 | ## Stay in Touch 19 | 20 | For latest releases and announcements, follow on Twitter: [@quasarframework](https://twitter.com/quasarframework) 21 | 22 | ## Chat Support 23 | 24 | Ask questions at the official community Discord server: [https://chat.quasar.dev](https://chat.quasar.dev) 25 | 26 | ## Community Forum 27 | 28 | Ask questions at the official community forum: [https://forum.quasar.dev](https://forum.quasar.dev) 29 | 30 | ## License 31 | 32 | Copyright (c) 2019-present Razvan Stoenescu 33 | 34 | [MIT License](http://en.wikipedia.org/wiki/MIT_License) 35 | -------------------------------------------------------------------------------- /my-component/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Quasar App Extension index/runner script 3 | * (runs on each dev/build) 4 | * 5 | * Docs: https://quasar.dev/app-extensions/development-guide/index-api 6 | * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/IndexAPI.js 7 | */ 8 | 9 | function extendConf (conf, api) { 10 | // make sure my-ext boot file is registered 11 | conf.boot.push('~quasar-app-extension-my-component/src/boot/register-my-component.js') 12 | 13 | if (api.hasVite !== true) { 14 | // make sure boot & component files get transpiled 15 | conf.build.transpileDependencies.push(/quasar-app-extension-my-component[\\/]src/) 16 | } 17 | 18 | // make sure my-ext css goes through webpack to avoid ssr issues 19 | conf.css.push('~quasar-app-extension-my-component/src/component/MyComponent.sass') 20 | } 21 | 22 | module.exports = function (api) { 23 | // (Optional!) 24 | // Quasar compatibility check; you may need 25 | // hard dependencies, as in a minimum version of the "quasar" 26 | // package or a minimum version of Quasar App CLI 27 | api.compatibleWith('quasar', '^2.0.0') 28 | 29 | if (api.hasVite === true) { 30 | api.compatibleWith('@quasar/app-vite', '^1.0.0-alpha.0') 31 | } 32 | else { 33 | // should be "@quasar/app-webpack" but that is not backward compatible 34 | api.compatibleWith('@quasar/app', '^3.0.0') 35 | } 36 | 37 | // Here we extend /quasar.conf.js, so we can add 38 | // a boot file which registers our new UI component; 39 | // "extendConf" will be defined below (keep reading the tutorial) 40 | api.extendQuasarConf(extendConf) 41 | } 42 | -------------------------------------------------------------------------------- /my-starter-kit/src/prompts.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Quasar App Extension prompts script 3 | * 4 | * Docs: https://quasar.dev/app-extensions/development-guide/prompts-api 5 | * 6 | * Inquirer prompts 7 | * (answers are available as "api.prompts" in the other scripts) 8 | * https://www.npmjs.com/package/inquirer#question 9 | * 10 | * Example: 11 | 12 | return [ 13 | { 14 | name: 'name', 15 | type: 'string', 16 | required: true, 17 | message: 'Quasar CLI Extension name (without prefix)', 18 | }, 19 | { 20 | name: 'preset', 21 | type: 'checkbox', 22 | message: 'Check the features needed for your project:', 23 | choices: [ 24 | { 25 | name: 'Install script', 26 | value: 'install' 27 | }, 28 | { 29 | name: 'Prompts script', 30 | value: 'prompts' 31 | }, 32 | { 33 | name: 'Uninstall script', 34 | value: 'uninstall' 35 | } 36 | ] 37 | } 38 | ] 39 | 40 | */ 41 | 42 | module.exports = function () { 43 | return [ 44 | { 45 | name: 'serviceA', 46 | type: 'confirm', 47 | message: 'Do you want service "A"?' 48 | }, 49 | 50 | { 51 | name: 'serviceB', 52 | type: 'confirm', 53 | message: 'Do you want service "B"?' 54 | }, 55 | 56 | { 57 | name: 'productName', 58 | type: 'string', 59 | required: true, 60 | when: 'service.B', 61 | message: 'Since you want service "B", what is the Product Name?', 62 | default: 'MyProduct' 63 | }, 64 | 65 | { 66 | name: 'publishService', 67 | type: 'confirm', 68 | message: 'Do you want the publishing service?', 69 | default: true 70 | } 71 | ] 72 | } 73 | -------------------------------------------------------------------------------- /chain-webpack/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Quasar App Extension index/runner script 3 | * (runs on each dev/build) 4 | * 5 | * Docs: https://quasar.dev/app-extensions/development-guide/index-api 6 | * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/IndexAPI.js 7 | */ 8 | 9 | const MarkdownIt = require('markdown-it') 10 | const md = new MarkdownIt() 11 | 12 | const chainWebpack = function (ctx, chain) { 13 | const rule = chain.module.rule('md') 14 | .test(/\.md$/) 15 | .pre() 16 | 17 | rule.use('v-loader') 18 | .loader('vue-loader') 19 | .options({ 20 | productionMode: ctx.prod, 21 | compilerOptions: { 22 | preserveWhitespace: false 23 | }, 24 | transformAssetUrls: { 25 | video: 'src', 26 | source: 'src', 27 | img: 'src', 28 | image: 'xlink:href' 29 | } 30 | }) 31 | 32 | rule.use('ware-loader') 33 | .loader('ware-loader') 34 | .options({ 35 | raw: true, 36 | middleware: function (source) { 37 | // use markdown-it to render the markdown file to html, then 38 | // surround the output of that that with Vue template syntax 39 | // so it can be processed by the 'vue-loader' 40 | return `` 41 | } 42 | }) 43 | } 44 | 45 | module.exports = function (api) { 46 | // (Optional!) 47 | // Quasar compatibility check; you may need 48 | // hard dependencies, as in a minimum version of the "quasar" 49 | // package or a minimum version of "@quasar/app" CLI 50 | api.compatibleWith('quasar', '^2.0.0-beta.19') 51 | api.compatibleWith('@quasar/app', '^3.0.0-beta.28') 52 | 53 | // chain webpack 54 | api.chainWebpack((chain) => chainWebpack(api.ctx, chain)) 55 | } 56 | -------------------------------------------------------------------------------- /inject-quasar-plugin/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Quasar App Extension index/runner script 3 | * (runs on each dev/build) 4 | * 5 | * Docs: https://quasar.dev/app-extensions/development-guide/index-api 6 | * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/IndexAPI.js 7 | */ 8 | 9 | function extendConf (conf, api) { 10 | // make sure my-ext boot file is registered 11 | conf.boot.push('~quasar-app-extension-my-component/src/boot/register-my-component.js') 12 | 13 | if (api.hasVite !== true) { 14 | // make sure boot & component files get transpiled 15 | conf.build.transpileDependencies.push(/quasar-app-extension-my-component[\\/]src/) 16 | } 17 | 18 | // make sure my-ext css goes through webpack to avoid ssr issues 19 | conf.css.push('~quasar-app-extension-my-component/src/component/MyComponent.sass') 20 | 21 | // we push to /quasar.conf.js > framework > plugins: 22 | // https://quasar.dev/quasar-plugins/app-visibility 23 | conf.framework.plugins.push('AppVisibility') 24 | } 25 | 26 | module.exports = function (api) { 27 | // (Optional!) 28 | // Quasar compatibility check; you may need 29 | // hard dependencies, as in a minimum version of the "quasar" 30 | // package or a minimum version of Quasar App CLI 31 | api.compatibleWith('quasar', '^2.0.0') 32 | 33 | if (api.hasVite === true) { 34 | api.compatibleWith('@quasar/app-vite', '^1.0.0-alpha.0') 35 | } 36 | else { 37 | // should be "@quasar/app-webpack" but that is not backward compatible 38 | api.compatibleWith('@quasar/app', '^3.0.0') 39 | } 40 | 41 | // Here we extend /quasar.conf.js, so we can add 42 | // a boot file which registers our new UI component; 43 | // "extendConf" will be defined below (keep reading the tutorial) 44 | api.extendQuasarConf(extendConf) 45 | } 46 | -------------------------------------------------------------------------------- /my-starter-kit/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Quasar App Extension index/runner script 3 | * (runs on each dev/build) 4 | * 5 | * Docs: https://quasar.dev/app-extensions/development-guide/index-api 6 | * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/IndexAPI.js 7 | */ 8 | 9 | /** 10 | * Take this as an example only. 11 | * We've cherry-picked just a few out of the many 12 | * things that you can do. 13 | */ 14 | 15 | function extendQuasarConf (conf, api) { 16 | conf.extras.push('ionicons-v4') 17 | conf.framework.iconSet = 'ionicons-v4' 18 | 19 | // 20 | // We register a boot file. User does not need to tamper with it, 21 | // so we keep it into the App Extension code: 22 | // 23 | 24 | // make sure my-ext boot file is registered 25 | conf.boot.push('~quasar-app-extension-my-starter-kit/src/boot/my-starter-kit-boot.js') 26 | 27 | if (api.hasVite !== true) { 28 | // make sure boot file get transpiled 29 | conf.build.transpileDependencies.push(/quasar-app-extension-my-starter-kit[\\/]src/) 30 | } 31 | } 32 | 33 | function onPublish (api, { arg, distDir }) { 34 | // this hook is called when "quasar build --publish" is called 35 | 36 | // your publish logic here... 37 | console.log('We should publish now. But maybe later? :)') 38 | 39 | // are we trying to publish a Cordova app? 40 | if (api.ctx.modeName === 'cordova') { 41 | // do something 42 | } 43 | } 44 | 45 | function chainWebpack (cfg, { isClient, isServer }, api) { 46 | // cfg is a Webpack chain Object; 47 | // docs on how to use it: webpack-chain docs (https://github.com/neutrinojs/webpack-chain) 48 | } 49 | 50 | function extendViteConf (viteConf, { isClient, isServer }, api) { 51 | // viteConf is the Vite config object generated by Quasar CLI 52 | } 53 | 54 | module.exports = function (api) { 55 | // (Optional!) 56 | // Quasar compatibility check; you may need 57 | // hard dependencies, as in a minimum version of the "quasar" 58 | // package or a minimum version of Quasar App CLI 59 | api.compatibleWith('quasar', '^2.0.0') 60 | 61 | if (api.hasVite === true) { 62 | api.compatibleWith('@quasar/app-vite', '^1.0.0-alpha.0') 63 | } 64 | else { 65 | // should be "@quasar/app-webpack" but that is not backward compatible 66 | api.compatibleWith('@quasar/app', '^3.0.0') 67 | } 68 | 69 | // Here we extend /quasar.conf.js 70 | api.extendQuasarConf(extendQuasarConf) 71 | 72 | // Here we register the onPublish hook, 73 | // only if user answered that he wants the publishing service 74 | if (api.prompts.publishService) { 75 | api.onPublish(onPublish) 76 | } 77 | 78 | if (api.hasVite === true) { 79 | api.extendViteConf(extendViteConf) 80 | } 81 | else { 82 | // we add/change/remove something in the Webpack configuration 83 | api.chainWebpack(chainWebpack) 84 | } 85 | 86 | // there's lots more hooks that you can use... 87 | } 88 | --------------------------------------------------------------------------------