[](https://discord.gg/5TDhbDg)
-
+
Please submit a PR to https://github.com/quasarframework/quasar-awesome with your website/app/Quasar tutorial/video etc. Thank you!
## Getting started
-:warning: Make sure you have vue-cli 3.x.x:
+:warning: Make sure you have vue-cli v5:
```
vue --version
```
-If you don't have a project created with vue-cli 3.x yet:
+If you don't have a project created with vue-cli v5 yet:
```
vue create my-app
@@ -29,24 +29,23 @@ vue create my-app
Navigate to the newly created project folder and add the cli plugin. Before installing it, make sure to commit your current changes should you wish to revert them later.
```
-cd my-app
-vue add quasar
+$ cd my-app
+$ yarn add --dev vue-cli-plugin-quasar
+$ vue invoke quasar
```
It will ask you if you want the plugin to replace some existing files. It is recommended that you do it if you wish to have an example so you can quickly develop your app.
-Your Vue config (in package.json or vue.config.js file, depending on what you chose when you created your vue app) will also contain a `quasar` Object. Most important property is `theme` (with possible values "mat" or "ios"), which you can later change should you want.
+Your Vue config (in package.json or vue.config.js file, depending on what you chose when you created your vue app) will also contain a `quasar` Object.
## Supporting Quasar
-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). If you'd like to join them, check out [Quasar Framework's Patreon campaign](https://www.patreon.com/quasarframework).
+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).
-### Proudly sponsored by:
-
-[](http://truelogic.com)
+**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).
## Documentation
-Head on to the Quasar Framework official website: [http://quasar-framework.org](http://quasar-framework.org)
+Head on to the Quasar Framework official website: [https://quasar.dev](https://quasar.dev)
## Stay in Touch
@@ -54,13 +53,11 @@ For latest releases and announcements, follow on Twitter: [@quasarframework](htt
## Community Forum
-Head on to the official community forum: [http://forum.quasar-framework.org](http://forum.quasar-framework.org)
+Head on to the official community forum: [https://forum.quasar.dev](https://forum.quasar.dev)
## Quasar Repositories
-* [Quasar Framework](https://github.com/quasarframework/quasar)
-* [Quasar CLI](https://github.com/quasarframework/quasar-cli)
-* [Quasar Play App](https://github.com/quasarframework/quasar-play)
+* [Quasar Framework](https://github.com/quasarframework)
## Contributing
@@ -70,7 +67,7 @@ I'm excited if you want to contribute to Quasar under any form (report bugs, wri
**Please use the appropriate Github repo to report issues. See "Related Components" above.** For example, a bug related to CLI should be reported to the CLI repo, one related to build issues to Quasar Framework Templates repo and so on.
-- The issue list of the repository is **exclusively** for bug reports and feature requests. For anything else please use the [Community Forum](http://forum.quasar-framework.org).
+- The issue list of the repository is **exclusively** for bug reports and feature requests. For anything else please use the [Community Forum](https://forum.quasar.dev).
- Try to search for your issue, it may have already been fixed in the development branch or it may have a resolution.
@@ -80,8 +77,6 @@ I'm excited if you want to contribute to Quasar under any form (report bugs, wri
- If your issue is resolved but still open, don’t hesitate to close it. In case you found a solution by yourself, it could be helpful to explain how you fixed it.
-Read more [here](http://quasar-framework.org/guide/quasar-contribution-guide.html).
-
## License
Copyright (c) 2016-present Razvan Stoenescu
diff --git a/generator/index.js b/generator/index.js
index ce865ef..f97b1d3 100644
--- a/generator/index.js
+++ b/generator/index.js
@@ -1,15 +1,15 @@
-const
- fs = require('fs'),
- extendPluginOptions = require('../lib/extendPluginOptions'),
- extendBabel = require('../lib/extendBabel')
+const fs = require('fs')
+const extendPluginOptions = require('../lib/extendPluginOptions')
const message = `
-Documentation can be found at: https://quasar-framework.org
+Documentation can be found at: https://quasar.dev
-Quasar is relying on donations to evolve. We'd be very grateful if you can
-take a look at: https://www.patreon.com/quasarframework
-Any amount is very welcomed.
-If invoices are required, please first contact razvan.stoenescu@gmail.com
+Quasar is relying on donations to evolve. We'd be very grateful
+if you can read our manifest on "Why donations are important":
+https://quasar.dev/why-donate
+Donation campaign: https://donate.quasar.dev Any amount is very
+welcomed. If invoices are required, please first contact
+razvan@quasar.dev
Please give us a star on Github if you appreciate our work:
https://github.com/quasarframework/quasar
@@ -17,158 +17,134 @@ https://github.com/quasarframework/quasar
Enjoy! - Quasar Team
`
-module.exports = (api, opts, rootOpts) => {
- const
- components = [
- 'QBtn',
- 'QLayout',
- 'QLayoutHeader',
- 'QLayoutDrawer',
- 'QPage',
- 'QPageContainer',
- 'QToolbar',
- 'QToolbarTitle',
- 'QList',
- 'QListHeader',
- 'QItemSeparator',
- 'QItem',
- 'QItemSide',
- 'QItemMain',
- ],
- directives = [],
- plugins = []
+const iconMap = {
+ ionicons: 'ionicons-v4',
+ fontawesome: 'fontawesome-v5',
+ mdi: 'mdi-v4'
+}
+const plugins = []
+
+module.exports = (api, opts) => {
const
+ quasarPath = api.resolve('./src/quasar-user-options.js'),
tsPath = api.resolve('./src/main.ts'),
jsPath = api.resolve('./src/main.js'),
hasTS = fs.existsSync(tsPath)
+ const dependencies = {
+ quasar: '^2.16.0',
+ '@quasar/extras': '^1.0.0'
+ }
+
const deps = {
- dependencies: {
- 'quasar-framework': '^0.17.0',
- 'quasar-extras': '^2.0.4'
- },
- devDependencies: {
- 'babel-plugin-transform-imports': '1.5.0',
- 'stylus': '^0.54.5',
- 'stylus-loader': '^3.0.2'
- }
+ dependencies,
+ devDependencies: {}
+ }
+
+ if (['sass', 'scss'].includes(opts.quasar.cssPreprocessor)) {
+ Object.assign(deps.devDependencies, {
+ 'sass': '^1.78.0',
+ 'sass-loader': '^14.2.1'
+ })
}
if (opts.quasar.rtlSupport) {
- deps.devDependencies['postcss-rtl'] = '^1.2.3'
+ deps.devDependencies['postcss-rtlcss'] = '^5.4.0'
}
api.extendPackage(deps)
// modify plugin options
extendPluginOptions(api, (pluginOptions, transpileDependencies) => {
- pluginOptions.quasar = {
- theme: opts.quasar.theme
- }
- if (opts.quasar.rtlSupport) {
- pluginOptions.quasar.rtlSupport = true
- }
- if (opts.quasar.all) {
- pluginOptions.quasar.importAll = true
- }
+ pluginOptions.quasar = Object.assign(
+ pluginOptions.quasar || {},
+ {
+ importStrategy: 'kebab',
+ rtlSupport: opts.quasar.rtlSupport
+ }
+ )
- transpileDependencies.push(/[\\/]node_modules[\\/]quasar-framework[\\/]/)
+ transpileDependencies.push('quasar')
return { pluginOptions, transpileDependencies }
})
api.render('./templates/common')
+
if (opts.quasar.rtlSupport) {
api.render('./templates/rtl')
}
+
+ if (opts.quasar.cssPreprocessor !== 'none') {
+ api.render(`./templates/${opts.quasar.cssPreprocessor}`)
+ }
+
if (opts.quasar.replaceComponents) {
- const
- extension = hasTS ? 'ts' : 'js',
+ const extension = hasTS ? 'ts' : 'js',
routerFile = api.resolve(`src/router.${extension}`),
hasRouter = fs.existsSync(routerFile)
- api.render(`./templates/with${hasRouter ? '' : 'out'}-router`, opts)
+ api.render(`./templates/with${hasRouter ? '' : 'out'}-router-base`, opts)
+ api.render(
+ `./templates/with${hasRouter ? '' : 'out'}-router`,
+ opts
+ )
if (hasRouter) {
api.render(`./templates/with-router-${extension}`)
}
}
api.onCreateComplete(() => {
- if (!opts.quasar.all) {
- extendBabel(api, opts.quasar.theme)
- }
-
- let lines = '\n'
+ let qFileLines = ''
const
- hasLang = opts.quasar.i18n !== 'en-us',
- hasIconSet = opts.quasar.iconSet !== 'material-icons'
+ hasIconSet = opts.quasar.iconSet !== 'material-icons',
+ hasLang = opts.quasar.lang !== 'en-US'
if (!opts.quasar.features.includes(opts.quasar.iconSet)) {
opts.quasar.features.push(opts.quasar.iconSet)
}
- lines += `\nimport './styles/quasar.styl'`
-
- if (opts.quasar.features.includes('ie')) {
- lines += `\nimport 'quasar-framework/dist/quasar.ie.polyfills'`
+ if (opts.quasar.cssPreprocessor !== 'none') {
+ qFileLines += `\nimport './styles/quasar.${opts.quasar.cssPreprocessor}'`
}
+ else {
+ qFileLines += `\nimport 'quasar/dist/quasar.css'`
+ }
+
if (hasIconSet) {
- lines += `\nimport iconSet from 'quasar-framework/icons/${opts.quasar.iconSet}'`
+ const set = iconMap[opts.quasar.iconSet] || opts.quasar.iconSet
+ qFileLines += `\nimport iconSet from 'quasar/icon-set/${set}.js'`
}
+
if (hasLang) {
- lines += `\nimport lang from 'quasar-framework/i18n/${opts.quasar.i18n}'`
+ qFileLines += `\nimport lang from 'quasar/lang/${opts.quasar.lang}.js'`
}
+
opts.quasar.features
- .filter(feat => feat !== 'ie')
.forEach(feat => {
- lines += `\nimport 'quasar-extras/${feat}'`
+ feat = iconMap[feat] || feat
+ qFileLines += `\nimport '@quasar/extras/${feat}/${feat}.css'`
})
- // build import
- lines += `\nimport `
- if (opts.quasar.all) {
- lines += `Quasar`
- }
- else {
- lines += `{\n Quasar, `
- components.concat(directives).concat(plugins)
- .forEach(part => { lines += `\n ${part},` })
- lines += `\n}`
- }
- lines += ` from 'quasar'`
-
- // build Vue.use()
- lines += `\n\nVue.use(Quasar, {`
- lines += `\n config: {}`
-
- // if not 'all' we want to include specific defaults
- if (!opts.quasar.all) {
- lines+= ',\n components: {'
- components
- .forEach(part => { lines += `\n ${part},` })
- lines += `\n }`
-
- lines+= ',\n directives: {'
- directives
- .forEach(part => { lines += `\n ${part},` })
- lines += `\n }`
-
- lines+= ',\n plugins: {'
- plugins
- .forEach(part => { lines += `\n ${part},` })
- lines += `\n }`
- }
+ qFileLines += `\n\n// To be used on app.use(Quasar, { ... })\nexport default {`
+ qFileLines += `\n config: {}`
+
+ qFileLines += ',\n plugins: {'
+ plugins.forEach(part => {
+ qFileLines += `\n ${part},`
+ })
+ qFileLines += `\n }`
if (hasLang) {
- lines += `, i18n: lang`
+ qFileLines += `,\n lang: lang`
}
if (hasIconSet) {
- lines += `, iconSet: iconSet`
+ qFileLines += `,\n iconSet: iconSet`
}
- lines += `\n })`
+ qFileLines += `\n}`
// Now inject additions to main.[js|ts]
{
@@ -178,10 +154,13 @@ module.exports = (api, opts, rootOpts) => {
const mainLines = content.split(/\r?\n/g).reverse()
const index = mainLines.findIndex(line => line.match(/^import/))
- mainLines[index] += lines
+ mainLines[index] += `\nimport { Quasar } from 'quasar'\nimport quasarUserOptions from './quasar-user-options'`
content = mainLines.reverse().join('\n')
+ content = content.replace('createApp(App)', `createApp(App).use(Quasar, quasarUserOptions)`)
fs.writeFileSync(mainPath, content, { encoding: 'utf8' })
+
+ fs.writeFileSync(quasarPath, qFileLines, { encoding: 'utf8' })
}
if (api.generator.hasPlugin('@vue/cli-plugin-eslint')) {
diff --git a/generator/templates/common/public/favicon.ico b/generator/templates/common/public/favicon.ico
index b3446a1..ae7bbdb 100644
Binary files a/generator/templates/common/public/favicon.ico and b/generator/templates/common/public/favicon.ico differ
diff --git a/generator/templates/common/src/assets/logo.png b/generator/templates/common/src/assets/logo.png
deleted file mode 100644
index 2a9b50b..0000000
Binary files a/generator/templates/common/src/assets/logo.png and /dev/null differ
diff --git a/generator/templates/common/src/assets/logo.svg b/generator/templates/common/src/assets/logo.svg
new file mode 100644
index 0000000..8210831
--- /dev/null
+++ b/generator/templates/common/src/assets/logo.svg
@@ -0,0 +1,15 @@
+
\ No newline at end of file
diff --git a/generator/templates/common/src/styles/quasar.variables.styl b/generator/templates/common/src/styles/quasar.variables.styl
deleted file mode 100644
index b1545ef..0000000
--- a/generator/templates/common/src/styles/quasar.variables.styl
+++ /dev/null
@@ -1,14 +0,0 @@
-// It's highly recommended to change the default colors
-// to match your app's branding.
-
-$primary = #027be3
-$secondary = #26A69A
-$tertiary = #555
-
-$neutral = #E0E1E2
-$positive = #21BA45
-$negative = #DB2828
-$info = #31CCEC
-$warning = #F2C037
-
-@import '~quasar-variables'
diff --git a/generator/templates/rtl/_postcssrc.js b/generator/templates/rtl/_postcssrc.js
index 4759ab9..818be30 100644
--- a/generator/templates/rtl/_postcssrc.js
+++ b/generator/templates/rtl/_postcssrc.js
@@ -4,7 +4,7 @@ const plugins = [
if (process.env.QUASAR_RTL) {
plugins.push(
- require('postcss-rtl')({})
+ require('postcss-rtlcss')({})
)
}
diff --git a/generator/templates/common/src/styles/quasar.styl b/generator/templates/sass/src/styles/quasar.sass
similarity index 61%
rename from generator/templates/common/src/styles/quasar.styl
rename to generator/templates/sass/src/styles/quasar.sass
index 8b325c0..1ba19fe 100644
--- a/generator/templates/common/src/styles/quasar.styl
+++ b/generator/templates/sass/src/styles/quasar.sass
@@ -1,3 +1,3 @@
-@import './quasar.variables'
+@import './quasar.variables.sass'
@import '~quasar-styl'
// @import '~quasar-addon-styl'
diff --git a/generator/templates/sass/src/styles/quasar.variables.sass b/generator/templates/sass/src/styles/quasar.variables.sass
new file mode 100644
index 0000000..b07df8a
--- /dev/null
+++ b/generator/templates/sass/src/styles/quasar.variables.sass
@@ -0,0 +1,15 @@
+// It's highly recommended to change the default colors
+// to match your app's branding.
+
+$primary : #027BE3
+$secondary : #26A69A
+$accent : #9C27B0
+
+$dark : #1D1D1D
+
+$positive : #21BA45
+$negative : #C10015
+$info : #31CCEC
+$warning : #F2C037
+
+@import '~quasar-variables-styl'
diff --git a/generator/templates/scss/src/styles/quasar.scss b/generator/templates/scss/src/styles/quasar.scss
new file mode 100644
index 0000000..7991e66
--- /dev/null
+++ b/generator/templates/scss/src/styles/quasar.scss
@@ -0,0 +1,3 @@
+@import './quasar.variables.scss';
+@import '~quasar-styl';
+// @import '~quasar-addon-styl';
diff --git a/generator/templates/scss/src/styles/quasar.variables.scss b/generator/templates/scss/src/styles/quasar.variables.scss
new file mode 100644
index 0000000..115c79a
--- /dev/null
+++ b/generator/templates/scss/src/styles/quasar.variables.scss
@@ -0,0 +1,15 @@
+// It's highly recommended to change the default colors
+// to match your app's branding.
+
+$primary : #027BE3;
+$secondary : #26A69A;
+$accent : #9C27B0;
+
+$dark : #1D1D1D;
+
+$positive : #21BA45;
+$negative : #C10015;
+$info : #31CCEC;
+$warning : #F2C037;
+
+@import '~quasar-variables-styl'
diff --git a/generator/templates/with-router-base/src/App.vue b/generator/templates/with-router-base/src/App.vue
new file mode 100644
index 0000000..083049b
--- /dev/null
+++ b/generator/templates/with-router-base/src/App.vue
@@ -0,0 +1,3 @@
+
+ 
+ 
+