create-quasar 2.1.1 → 2.2.1

package/templates/app-extension/ae-ts/BASE/_package.json

@@ -1,19 +1,19 @@
 {
-  "name": "quasar-app-extension-<%= name %>-monorepo",
+  "name": "quasar-app-extension-<%= scope.name %>-monorepo",
   "private": true,
-  <% if (packageManagerField) { %>"packageManager": "<%= packageManagerField %>",<% } %>
-  "author": "<%= author %>",
+  <% if (scope.packageManagerField) { %>"packageManager": "<%= scope.packageManagerField %>",<% } %>
+  "author": "<%= scope.author %>",
   "type": "module",
-  <% if (packageManager?.name !== 'pnpm') { %>"workspaces": [
+  <% if (scope.packageManager?.name !== 'pnpm') { %>"workspaces": [
     "app-extension",
     "playground/*"
   ],<% } %>
   "scripts": {
-    <% if (packageManager) { %>
-    "build": <% if (['pnpm', 'bun'].includes(packageManager.name)) { %>"<%= packageManager.name %> --filter ./app-extension build"<% } else if (packageManager.name === 'yarn') { %>"yarn workspace <%= pkgName %> build"<% } else { %>"npm run --workspace <%= pkgName %> build"<% } %>,
-    "dev:vite": <% if (['pnpm', 'bun'].includes(packageManager.name)) { %>"<%= packageManager.name %> --filter ./playground/quasar-cli-vite dev"<% } else if (packageManager.name === 'yarn') { %>"yarn workspace playground-quasar-cli-vite dev"<% } else { %>"npm run --workspace playground-quasar-cli-vite dev"<% } %>,
-    "dev:webpack": <% if (['pnpm', 'bun'].includes(packageManager.name)) { %>"<%= packageManager.name %> --filter ./playground/quasar-cli-webpack dev"<% } else if (packageManager.name === 'yarn') { %>"yarn workspace playground-quasar-cli-webpack dev"<% } else { %>"npm run --workspace playground-quasar-cli-webpack dev"<% } %>,
-    "format": <% if (packageManager.name === 'pnpm') { %>"pnpm format:root && pnpm --recursive format"<% } else if (packageManager.name === 'bun') { %>"bun format:root && bun --filter '*' format"<% } else if (packageManager.name === 'yarn') { %>"yarn format:root && yarn workspace <%= pkgName %> format"<% } else { %>"npm run format:root && npm run --workspaces format"<% } %>,
+    <% if (scope.packageManager) { %>
+    "build": <% if (['pnpm', 'bun'].includes(scope.packageManager.name)) { %>"<%= scope.packageManager.name %> --filter ./app-extension build"<% } else if (scope.packageManager.name === 'yarn') { %>"yarn workspace <%= scope.pkgName %> build"<% } else { %>"npm run --workspace <%= scope.pkgName %> build"<% } %>,
+    "dev:vite": <% if (['pnpm', 'bun'].includes(scope.packageManager.name)) { %>"<%= scope.packageManager.name %> --filter ./playground/quasar-cli-vite dev"<% } else if (scope.packageManager.name === 'yarn') { %>"yarn workspace playground-quasar-cli-vite dev"<% } else { %>"npm run --workspace playground-quasar-cli-vite dev"<% } %>,
+    "dev:webpack": <% if (['pnpm', 'bun'].includes(scope.packageManager.name)) { %>"<%= scope.packageManager.name %> --filter ./playground/quasar-cli-webpack dev"<% } else if (scope.packageManager.name === 'yarn') { %>"yarn workspace playground-quasar-cli-webpack dev"<% } else { %>"npm run --workspace playground-quasar-cli-webpack dev"<% } %>,
+    "format": <% if (scope.packageManager.name === 'pnpm') { %>"pnpm format:root && pnpm --recursive format"<% } else if (scope.packageManager.name === 'bun') { %>"bun format:root && bun --filter '*' format"<% } else if (scope.packageManager.name === 'yarn') { %>"yarn format:root && yarn workspace <%= scope.pkgName %> format"<% } else { %>"npm run format:root && npm run --workspaces format"<% } %>,
     <% } else { %>
     "build": "pnpm --filter ./app-extension build",
     "dev:vite": "pnpm --filter ./playground/quasar-cli-vite dev",

package/templates/app-extension/ae-ts/BASE/app-extension/README.md

@@ -1,14 +1,14 @@
-# Quasar App Extension <%= name %> (<%= pkgName %>)
+# Quasar App Extension <%= scope.name %> (<%= scope.pkgName %>)
 
 > TODO: Add a short description of your App Extension. What does it do? How is it beneficial? Why would someone want to use it?
 
-[![npm](https://img.shields.io/npm/v/<%= pkgName %>.svg?label=<%= pkgName %>)](https://www.npmjs.com/package/<%= pkgName %>)
-[![npm](https://img.shields.io/npm/dt/<%= pkgName %>.svg)](https://www.npmjs.com/package/<%= pkgName %>)
+[![npm](https://img.shields.io/npm/v/<%= scope.pkgName %>.svg?label=<%= scope.pkgName %>)](https://www.npmjs.com/package/<%= scope.pkgName %>)
+[![npm](https://img.shields.io/npm/dt/<%= scope.pkgName %>.svg)](https://www.npmjs.com/package/<%= scope.pkgName %>)
 
 # Install
 
 ```bash
-quasar ext add <%= name %>
+quasar ext add <%= scope.name %>
 ```
 
 Quasar CLI will retrieve it from NPM and install the extension.
@@ -18,7 +18,7 @@ Quasar CLI will retrieve it from NPM and install the extension.
 Add this to `src/quasar.d.ts` to load the global component typings:
 ```ts
 // Load global component typings
-/// <reference types="<%= pkgName %>" />
+/// <reference types="<%= scope.pkgName %>" />
 ```
 
 ## Prompts
@@ -28,7 +28,7 @@ Add this to `src/quasar.d.ts` to load the global component typings:
 # Uninstall
 
 ```bash
-quasar ext remove <%= name %>
+quasar ext remove <%= scope.name %>
 ```
 
 # Info
@@ -49,4 +49,4 @@ If you appreciate the work that went into this App Extension, please consider [d
 
 # License
 
-<%= license %> (c) <%= author %>
+<%= scope.license %> (c) <%= scope.author %>

package/templates/app-extension/ae-ts/BASE/app-extension/_package.json

@@ -1,9 +1,9 @@
 {
-  "name": "<%= pkgName %>",
+  "name": "<%= scope.pkgName %>",
   "version": "0.0.1",
-  "description": "<%= description %>",
-  "author": "<%= author %>",
-  "license": "<%= license %>",
+  "description": "<%= scope.description %>",
+  "author": "<%= scope.author %>",
+  "license": "<%= scope.license %>",
   "type": "module",
   "main": "./dist/runtime/index.js",
   "module": "./dist/runtime/index.js",
@@ -14,17 +14,17 @@
       "import": "./dist/runtime/index.js"
     },
     "./package.json": "./package.json",
-    <% if (preset.prompts) { %>"./dist/prompts": "./dist/prompts.js",<% } %>
-    <% if (preset.install) { %>"./dist/install": "./dist/install.js",<% } %>
-    <% if (preset.uninstall) { %>"./dist/uninstall": "./dist/uninstall.js",<% } %>
+    <% if (scope.preset.prompts) { %>"./dist/prompts": "./dist/prompts.js",<% } %>
+    <% if (scope.preset.install) { %>"./dist/install": "./dist/install.js",<% } %>
+    <% if (scope.preset.uninstall) { %>"./dist/uninstall": "./dist/uninstall.js",<% } %>
     "./dist/index": "./dist/index.js",
     "./*": "./dist/runtime/*"
   },
   "scripts": {
     "format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
-    <% if (preset.install) { %>"build:code": "mkdist ./ --ext=js --declaration --pattern='**' --pattern='!shims-vue.d.ts' --pattern='!templates/**'",
+    <% if (scope.preset.install) { %>"build:code": "mkdist ./ --ext=js --declaration --pattern='**' --pattern='!shims-vue.d.ts' --pattern='!templates/**'",
     "build:templates": "mkdist ./ --src ./src/templates --dist ./dist/templates --loaders='raw'",
-    "build": "<%= packageManager?.name ?? 'pnpm' %> run build:code && <%= packageManager?.name ?? 'pnpm' %> run build:templates"<% } else { %>"build": "mkdist ./ --ext=js --declaration --pattern='**' --pattern='!shims-vue.d.ts'"<% } %>
+    "build": "<%= scope.packageManager?.name ?? 'pnpm' %> run build:code && <%= scope.packageManager?.name ?? 'pnpm' %> run build:templates"<% } else { %>"build": "mkdist ./ --ext=js --declaration --pattern='**' --pattern='!shims-vue.d.ts'"<% } %>
   },
   "devDependencies": {
     "@quasar/app-vite": "^2.1.0",

package/templates/app-extension/ae-ts/BASE/app-extension/src/index.ts

@@ -23,13 +23,13 @@ export default function (api: IndexAPI) {
   }
 
   api.extendQuasarConf((conf, api) => {
-    conf.boot!.push('~<%= pkgName %>/boot/register');
+    conf.boot!.push('~<%= scope.pkgName %>/boot/register');
 
     // make sure app extension files get transpiled
     if (api.hasWebpack) {
       const config = conf as unknown as WebpackQuasarConfProxy;
       config.build.webpackTranspileDependencies.push(
-        /<%= pkgName.replace('/', '[\\\\/]') %>[\\/]dist/,
+        /<%= scope.pkgName.replace('/', '[\\\\/]') %>[\\/]dist/,
       );
     }
   });

package/templates/app-extension/ae-ts/BASE/app-extension/src/runtime/README.md

@@ -12,10 +12,10 @@ This directory contains runtime files for your app extension. The code here will
 Use `index.ts` to export your runtime code as part of the library. The exported code can then be imported like so:
 
 ```js
-import { someFunction } from '<%= pkgName %>'
+import { someFunction } from '<%= scope.pkgName %>'
 ```
 
-If you need more entrypoints(e.g. `<%= pkgName %>/another`) for a good reason, you can create the respective files and add an entry to `package.json > exports`.
+If you need more entrypoints(e.g. `<%= scope.pkgName %>/another`) for a good reason, you can create the respective files and add an entry to `package.json > exports`.
 
 ### Boot files
 
@@ -39,7 +39,7 @@ Afterwards, you can use the Index API ([`src/index.ts`](../index.ts)) to registe
 export default function (api: IndexAPI) {
   // ...
   api.extendQuasarConf((conf, api) => {
-    conf.boot!.push('~<%= pkgName %>/boot/some-boot-file');
+    conf.boot!.push('~<%= scope.pkgName %>/boot/some-boot-file');
     // ...
   });
 }

package/templates/app-extension/ae-ts/BASE/playground/quasar-cli-vite/README.md

@@ -1,11 +1,11 @@
-# Quasar AE <%= name %> Playground (quasar-cli-vite)
+# Quasar AE <%= scope.name %> Playground (quasar-cli-vite)
 
 Playground for Quasar AE <%= name %>
 
 ## Install the dependencies
 
-<% if (packageManager) { %>```bash
-<%= packageManager.name %> install
+<% if (scope.packageManager) { %>```bash
+<%= scope.packageManager.name %> install
 ```<% } else { %>```bash
 # One of the following, depending on your package manager
 npm install
@@ -16,8 +16,8 @@ bun install
 
 ### Start the app in development mode (hot-code reloading, error reporting, etc.)
 
-<% if (packageManager) { %>```bash
-<%= packageManager.name %> run dev
+<% if (scope.packageManager) { %>```bash
+<%= scope.packageManager.name %> run dev
 ```<% } else { %>```bash
 # One of the following, depending on your package manager
 npm run dev
@@ -28,8 +28,8 @@ bun dev
 
 ### Lint the files
 
-<% if (packageManager) { %>```bash
-<%= packageManager.name %> run lint
+<% if (scope.packageManager) { %>```bash
+<%= scope.packageManager.name %> run lint
 ```<% } else { %>```bash
 # One of the following, depending on your package manager
 npm run lint
@@ -40,8 +40,8 @@ bun lint
 
 ### Format the files
 
-<% if (packageManager) { %>```bash
-<%= packageManager.name %> run format
+<% if (scope.packageManager) { %>```bash
+<%= scope.packageManager.name %> run format
 ```<% } else { %>```bash
 # One of the following, depending on your package manager
 npm run format
@@ -52,8 +52,8 @@ bun format
 
 ### Build the app for production
 
-<% if (packageManager) { %>```bash
-<%= packageManager.name %> run build
+<% if (scope.packageManager) { %>```bash
+<%= scope.packageManager.name %> run build
 ```<% } else { %>```bash
 # One of the following, depending on your package manager
 npm run build

package/templates/app-extension/ae-ts/BASE/playground/quasar-cli-vite/_package.json

@@ -1,9 +1,9 @@
 {
   "name": "playground-quasar-cli-vite",
   "version": "0.0.1",
-  "description": "Playground for Quasar AE <%= name %>",
-  "productName": "Quasar AE <%= name %> Playground",
-  "author": "<%= author %>",
+  "description": "Playground for Quasar AE <%= scope.name %>",
+  "productName": "Quasar AE <%= scope.name %> Playground",
+  "author": "<%= scope.author %>",
   "type": "module",
   "private": true,
   "scripts": {
@@ -17,7 +17,7 @@
     "quasar": "^2.16.7",
     "vue": "^3.4.36",
     "vue-router": "^5.0.3",
-    "<%= pkgName %>": <% if (!packageManager || ['pnpm', 'bun'].includes(packageManager.name)) { %>"workspace:*"<% } else { %>"*"<% } %>
+    "<%= scope.pkgName %>": <% if (!scope.packageManager || ['pnpm', 'bun'].includes(scope.packageManager.name)) { %>"workspace:*"<% } else { %>"*"<% } %>
   },
   "devDependencies": {
     "@quasar/app-vite": "^2.1.0",

package/templates/app-extension/ae-ts/BASE/playground/quasar-cli-vite/index.html

@@ -1,15 +1,15 @@
 <!doctype html>
 <html>
   <head>
-    <title><%= '\<%= productName %\>' %></title>
+    <title><%= '<' + '%= productName %' + '>' %></title>
 
     <meta charset="utf-8" />
-    <meta name="description" content="<%= '\<%= productDescription %\>' %>" />
+    <meta name="description" content="<%= '<' + '%= productDescription %' + '>' %>" />
     <meta name="format-detection" content="telephone=no" />
     <meta name="msapplication-tap-highlight" content="no" />
     <meta
       name="viewport"
-      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<%= '\<% if (ctx.mode.cordova || ctx.mode.capacitor) { %\>, viewport-fit=cover\<% } %\>' %>"
+      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<%= '<' + '% if (ctx.mode.cordova || ctx.mode.capacitor) { %' + '>, viewport-fit=cover<' + '% } %' + '>' %>"
     />
 
     <link

package/templates/app-extension/ae-ts/BASE/playground/quasar-cli-vite/quasar.extensions.json

@@ -1,3 +1,3 @@
 {
-  "<%= pkgName.replace('quasar-app-extension-', '') %>": {}
+  "<%= scope.pkgName.replace('quasar-app-extension-', '') %>": {}
 }

package/templates/app-extension/ae-ts/BASE/playground/quasar-cli-vite/src/quasar.d.ts

@@ -7,4 +7,4 @@
 /// <reference types="@quasar/app-vite" />
 
 // Load global component typings
-/// <reference types="<%= pkgName %>" />
+/// <reference types="<%= scope.pkgName %>" />

package/templates/app-extension/ae-ts/BASE/playground/quasar-cli-webpack/README.md

@@ -4,8 +4,8 @@ Playground for Quasar AE <%= name %>
 
 ## Install the dependencies
 
-<% if (packageManager) { %>```bash
-<%= packageManager.name %> install
+<% if (scope.packageManager) { %>```bash
+<%= scope.packageManager.name %> install
 ```<% } else { %>```bash
 # One of the following, depending on your package manager
 npm install
@@ -16,8 +16,8 @@ bun install
 
 ### Start the app in development mode (hot-code reloading, error reporting, etc.)
 
-<% if (packageManager) { %>```bash
-<%= packageManager.name %> run dev
+<% if (scope.packageManager) { %>```bash
+<%= scope.packageManager.name %> run dev
 ```<% } else { %>```bash
 # One of the following, depending on your package manager
 npm run dev
@@ -28,8 +28,8 @@ bun dev
 
 ### Lint the files
 
-<% if (packageManager) { %>```bash
-<%= packageManager.name %> run lint
+<% if (scope.packageManager) { %>```bash
+<%= scope.packageManager.name %> run lint
 ```<% } else { %>```bash
 # One of the following, depending on your package manager
 npm run lint
@@ -40,8 +40,8 @@ bun lint
 
 ### Format the files
 
-<% if (packageManager) { %>```bash
-<%= packageManager.name %> run format
+<% if (scope.packageManager) { %>```bash
+<%= scope.packageManager.name %> run format
 ```<% } else { %>```bash
 # One of the following, depending on your package manager
 npm run format
@@ -52,8 +52,8 @@ bun format
 
 ### Build the app for production
 
-<% if (packageManager) { %>```bash
-<%= packageManager.name %> run build
+<% if (scope.packageManager) { %>```bash
+<%= scope.packageManager.name %> run build
 ```<% } else { %>```bash
 # One of the following, depending on your package manager
 npm run build

package/templates/app-extension/ae-ts/BASE/playground/quasar-cli-webpack/_package.json

@@ -1,9 +1,9 @@
 {
   "name": "playground-quasar-cli-webpack",
   "version": "0.0.1",
-  "description": "Playground for Quasar AE <%= name %>",
-  "productName": "Quasar AE <%= name %> Playground",
-  "author": "<%= author %>",
+  "description": "Playground for Quasar AE <%= scope.name %>",
+  "productName": "Quasar AE <%= scope.name %> Playground",
+  "author": "<%= scope.author %>",
   "private": true,
   "scripts": {
     "format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
@@ -17,7 +17,7 @@
     "quasar": "^2.16.7",
     "vue": "^3.4.36",
     "vue-router": "^5.0.3",
-    "<%= pkgName %>": <% if (!packageManager || ['pnpm', 'bun'].includes(packageManager?.name)) { %>"workspace:*"<% } else { %>"*"<% } %>
+    "<%= scope.pkgName %>": <% if (!scope.packageManager || ['pnpm', 'bun'].includes(scope.packageManager?.name)) { %>"workspace:*"<% } else { %>"*"<% } %>
   },
   "devDependencies": {
     "@quasar/app-webpack": "^4.1.0",

package/templates/app-extension/ae-ts/BASE/playground/quasar-cli-webpack/index.html

@@ -1,15 +1,15 @@
 <!doctype html>
 <html>
   <head>
-    <title><%= '\<%= productName %\>' %></title>
+    <title><%= '<' + '%= productName %' + '>' %></title>
 
     <meta charset="utf-8" />
-    <meta name="description" content="<%= '\<%= productDescription %\>' %>" />
+    <meta name="description" content="<%= '<' + '%= productDescription %' + '>' %>" />
     <meta name="format-detection" content="telephone=no" />
     <meta name="msapplication-tap-highlight" content="no" />
     <meta
       name="viewport"
-      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<%= '\<% if (ctx.mode.cordova || ctx.mode.capacitor) { %\>, viewport-fit=cover\<% } %\>' %>"
+      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<%= '<' + '% if (ctx.mode.cordova || ctx.mode.capacitor) { %' + '>, viewport-fit=cover<' + '% } %' + '>' %>"
     />
 
     <link

package/templates/app-extension/ae-ts/BASE/playground/quasar-cli-webpack/quasar.extensions.json

@@ -1,3 +1,3 @@
 {
-  "<%= pkgName.replace('quasar-app-extension-', '') %>": {}
+  "<%= scope.pkgName.replace('quasar-app-extension-', '') %>": {}
 }

package/templates/app-extension/ae-ts/BASE/playground/quasar-cli-webpack/src/quasar.d.ts

@@ -7,4 +7,4 @@
 /// <reference types="@quasar/app-webpack" />
 
 // Load global component typings
-/// <reference types="<%= pkgName %>" />
+/// <reference types="<%= scope.pkgName %>" />

package/templates/app-extension/create-quasar-script.js

@@ -12,5 +12,6 @@ export async function createQuasarScript({ scope, utils }) {
 
   const { createQuasarScript: create } =
     await import('./ae-js/create-quasar-script.js')
+
   await create({ scope, utils })
 }

package/templates/ui-kit/quasar-v2/BASE/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) <%= author %>
+Copyright (c) <%= scope.author %>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/templates/ui-kit/quasar-v2/BASE/README.md

@@ -1,11 +1,11 @@
-<img src="https://img.shields.io/npm/v/quasar-ui-<%= name %>.svg?label=quasar-ui-<%= name %>">
-<% if (features.ae) { %><img src="https://img.shields.io/npm/v/quasar-app-extension-<%= name %>.svg?label=quasar-app-extension-<%= name %>"><% } %>
+<img src="https://img.shields.io/npm/v/quasar-ui-<%= scope.name %>.svg?label=quasar-ui-<%= scope.name %>">
+<% if (scope.features.ae) { %><img src="https://img.shields.io/npm/v/quasar-app-extension-<%= scope.name %>.svg?label=quasar-app-extension-<%= scope.name %>"><% } %>
 
 Compatible with Quasar UI v2 and Vue 3.
 
 # Structure
 * [/ui](ui) - standalone npm package
-<% if (features.ae) { %>
+<% if (scope.features.ae) { %>
 * [/app-extension](app-extension) - Quasar app extension
 <% } %>
 
@@ -13,4 +13,4 @@ Compatible with Quasar UI v2 and Vue 3.
 If you appreciate the work that went into this project, please consider [donating to Quasar](https://donate.quasar.dev).
 
 # License
-<%= license %> (c) <%= author %>
+<%= scope.license %> (c) <%= scope.author %>

package/templates/ui-kit/quasar-v2/BASE/ui/README.md

@@ -1,24 +1,24 @@
-# <% if (features.component) { %>Component <%= componentName %><% if (features.directive) { %> and <% } } %><% if (features.directive) { %>Directive v-<%= directiveName %><% } %>
+# <% if (scope.features.component) { %>Component <%= scope.componentName %><% if (scope.features.directive) { %> and <% } } %><% if (scope.features.directive) { %>Directive v-<%= scope.directiveName %><% } %>
 
-[![npm](https://img.shields.io/npm/v/quasar-ui-<%= name %>.svg?label=quasar-ui-<%= name %>)](https://www.npmjs.com/package/quasar-ui-<%= name %>)
-[![npm](https://img.shields.io/npm/dt/quasar-ui-<%= name %>.svg)](https://www.npmjs.com/package/quasar-ui-<%= name %>)
+[![npm](https://img.shields.io/npm/v/quasar-ui-<%= scope.name %>.svg?label=quasar-ui-<%= scope.name %>)](https://www.npmjs.com/package/quasar-ui-<%= scope.name %>)
+[![npm](https://img.shields.io/npm/dt/quasar-ui-<%= scope.name %>.svg)](https://www.npmjs.com/package/quasar-ui-<%= scope.name %>)
 
 **Compatible with Quasar UI v2 and Vue 3**.
 
-<% if (features.component) { %>
-# Component <%= componentName %>
+<% if (scope.features.component) { %>
+# Component <%= scope.componentName %>
 > Short description of the component
 <% } %>
 
-<% if (features.directive) { %>
-# Directive v-<%= directiveName %>
+<% if (scope.features.directive) { %>
+# Directive v-<%= scope.directiveName %>
 > Short description of the directive
 <% } %>
 
 # Usage
 
 ## Quasar CLI project
-<% if (features.ae) { %>
+<% if (scope.features.ae) { %>
 
 Install the [App Extension](../app-extension).
 
@@ -29,8 +29,8 @@ Create and register a boot file:
 
 ```js
 import Vue from 'vue'
-import Plugin from 'quasar-ui-<%= name %>'
-import 'quasar-ui-<%= name %>/dist/index.css'
+import Plugin from 'quasar-ui-<%= scope.name %>'
+import 'quasar-ui-<%= scope.name %>/dist/index.css'
 
 Vue.use(Plugin)
 ```
@@ -38,18 +38,18 @@ Vue.use(Plugin)
 **OR**:
 
 ```html
-<style src="quasar-ui-<%= name %>/dist/index.css"></style>
+<style src="quasar-ui-<%= scope.name %>/dist/index.css"></style>
 
 <script>
-import { <% if (features.component) { %>Component as <%= componentName %><% if (features.directive) { %>, <% } %><% } %><% if (features.directive) { %>Directive<% } %> } from 'quasar-ui-<%= name %>'
+import { <% if (scope.features.component) { %>Component as <%= scope.componentName %><% if (scope.features.directive) { %>, <% } %><% } %><% if (scope.features.directive) { %>Directive<% } %> } from 'quasar-ui-<%= scope.name %>'
 
 export default {
-  <% if (features.component) { %>
+  <% if (scope.features.component) { %>
   components: {
-    <%= componentName %>
-  }<% if (features.directive) { %>,<% } %>
+    <%= scope.componentName %>
+  }<% if (scope.features.directive) { %>,<% } %>
   <% } %>
-  <% if (features.directive) { %>
+  <% if (scope.features.directive) { %>
   directives: {
     Directive
   }
@@ -62,8 +62,8 @@ export default {
 
 ```js
 import Vue from 'vue'
-import Plugin from 'quasar-ui-<%= name %>'
-import 'quasar-ui-<%= name %>/dist/index.css'
+import Plugin from 'quasar-ui-<%= scope.name %>'
+import 'quasar-ui-<%= scope.name %>/dist/index.css'
 
 Vue.use(Plugin)
 ```
@@ -71,18 +71,18 @@ Vue.use(Plugin)
 **OR**:
 
 ```html
-<style src="quasar-ui-<%= name %>/dist/index.css"></style>
+<style src="quasar-ui-<%= scope.name %>/dist/index.css"></style>
 
 <script>
-import { <% if (features.component) { %>Component as <%= componentName %><% if (features.directive) { %>, <% } %><% } %><% if (features.directive) { %>Directive<% } %> } from 'quasar-ui-<%= name %>'
+import { <% if (scope.features.component) { %>Component as <%= scope.componentName %><% if (scope.features.directive) { %>, <% } %><% } %><% if (scope.features.directive) { %>Directive<% } %> } from 'quasar-ui-<%= scope.name %>'
 
 export default {
-  <% if (features.component) { %>
+  <% if (scope.features.component) { %>
   components: {
-    <%= componentName %>
-  }<% if (features.directive) { %>,<% } %>
+    <%= scope.componentName %>
+  }<% if (scope.features.directive) { %>,<% } %>
   <% } %>
-  <% if (features.directive) { %>
+  <% if (scope.features.directive) { %>
   directives: {
     Directive
   }
@@ -93,23 +93,23 @@ export default {
 
 ## UMD variant
 
-Exports `window.<%= umdExportName %>`.
+Exports `window.<%= scope.umdExportName %>`.
 
 Add the following tag(s) after the Quasar ones:
 
 ```html
 <head>
   <!-- AFTER the Quasar stylesheet tags: -->
-  <link href="https://cdn.jsdelivr.net/npm/quasar-ui-<%= name %>/dist/index.min.css" rel="stylesheet" type="text/css">
+  <link href="https://cdn.jsdelivr.net/npm/quasar-ui-<%= scope.name %>/dist/index.min.css" rel="stylesheet" type="text/css">
 </head>
 <body>
   <!-- at end of body, AFTER Quasar script(s): -->
-  <script src="https://cdn.jsdelivr.net/npm/quasar-ui-<%= name %>/dist/index.umd.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/quasar-ui-<%= scope.name %>/dist/index.umd.min.js"></script>
 </body>
 ```
 If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
 ```html
-<link href="https://cdn.jsdelivr.net/npm/quasar-ui-<%= name %>/dist/index.rtl.min.css" rel="stylesheet" type="text/css">
+<link href="https://cdn.jsdelivr.net/npm/quasar-ui-<%= scope.name %>/dist/index.rtl.min.css" rel="stylesheet" type="text/css">
 ```
 
 # Setup
@@ -153,4 +153,4 @@ If you have a component that has assets, like language or icon-sets, you will ne
 If you appreciate the work that went into this, please consider [donating to Quasar](https://donate.quasar.dev).
 
 # License
-<%= license %> (c) <%= author %>
+<%= scope.license %> (c) <%= scope.author %>

package/templates/ui-kit/quasar-v2/BASE/ui/_package.json

@@ -1,9 +1,9 @@
 {
-  "name": "quasar-ui-<%= name %>",
+  "name": "quasar-ui-<%= scope.name %>",
   "version": "0.0.1",
-  "author": "<%= author %>",
-  "description": "<%= packageDescription %>",
-  "license": "<%= license %>",
+  "author": "<%= scope.author %>",
+  "description": "<%= scope.packageDescription %>",
+  "license": "<%= scope.license %>",
   "module": "dist/index.esm.js",
   "main": "dist/index.common.js",
   "scripts": {

package/templates/ui-kit/quasar-v2/BASE/ui/build/index.js

@@ -8,7 +8,7 @@ const { green, blue } = require('chalk')
 
 console.log()
 
-<% if (features.ae) { %>require('./script.app-ext.js').syncAppExt()<% } %>
+<% if (scope.features.ae) { %>require('./script.app-ext.js').syncAppExt()<% } %>
 require('./script.clean.js')
 
 console.log(` 📦 Building ${green('v' + require('../package.json').version)}...${parallel ? blue(' [multi-threaded]') : ''}\n`)

package/templates/ui-kit/quasar-v2/BASE/ui/build/script.javascript.js

@@ -67,7 +67,7 @@ const builds = [
         input: pathResolve('../src/index.umd.js')
       },
       output: {
-        name: '<%= umdExportName %>',
+        name: '<%= scope.umdExportName %>',
         file: pathResolve('../dist/index.umd.js'),
         format: 'umd'
       }
@@ -116,7 +116,7 @@ function addAssets (builds, type, injectName) {
           output: {
             file: addExtension(pathResolve(`../dist/${type}/${file}`), 'umd'),
             format: 'umd',
-            name: `<%= umdExportName %>.${injectName}.${name}`
+            name: `<%= scope.umdExportName %>.${injectName}.${name}`
           }
         },
         build: {

package/templates/ui-kit/quasar-v2/BASE/ui/dev/src/index.template.html

@@ -1,16 +1,21 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title><%= '\<%= productName %\>' %></title>
+    <title><%= '<' + '%= productName %' + '>' %></title>
 
     <meta charset="utf-8">
-    <meta name="description" content="<%= '\<%= productDescription %\>' %>">
+    <meta name="description" content="<%= '<' + '%= productDescription %' + '>' %>">
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<%= '\<% if (ctx.mode.cordova || ctx.mode.capacitor) { %\>, viewport-fit=cover \<% } %\>' %>">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<%= '<' + '% if (ctx.mode.cordova || ctx.mode.capacitor) { %' + '>, viewport-fit=cover<' + '% } %' + '>' %>">
+
+    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+    <link rel="icon" type="image/ico" href="favicon.ico">
   </head>
   <body>
-    <!-- DO NOT touch the following DIV -->
-    <div id="q-app"></div>
+    <!-- quasar:entry-point -->
   </body>
 </html>