Merge branch 'next' into dev

Author: rstoenescu

README.md

@@ -2,7 +2,7 @@
 
 # Quasar Framework: vue-cli-plugin-quasar
 
-> :rocket: Start building a Vue app with Quasar Framework v1 (Vue 2) in 2 minutes!
+> :rocket: Start building a Vue app with Quasar Framework v2 in 2 minutes!
 
 > :warning: **For the premium (and recommended) experience with Quasar, including the ability to build Mobile & Electron apps and efortless upgrades to new Quasar versions, you should instead use Quasar CLI**
 
@@ -14,28 +14,32 @@ Please submit a PR to https://github.com/quasarframework/quasar-awesome with you
 
 ## Getting started
 
-:warning:  Make sure you have vue-cli v3/v4:
+:warning:  Make sure you have vue-cli 4.5.1+:
 
 ```
 vue --version
 ```
 
-If you don't have a project created with vue-cli v3/v4 yet:
+If you don't have a project created with vue-cli 4.5.1+ yet:
 
 ```
+# make sure to pick Vue 3 when asked:
 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
+# commands will change after Quasar v2 becomes stable (and out of beta)
+
+$ cd my-app
+$ yarn add --dev vue-cli-plugin-quasar@next
+$ 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).

generator/index.js

@@ -1,5 +1,5 @@
-const fs = require('fs'),
-  extendPluginOptions = require('../lib/extendPluginOptions')
+const fs = require('fs')
+const extendPluginOptions = require('../lib/extendPluginOptions')
 
 const message = `
 Documentation can be found at: https://quasar.dev
@@ -27,13 +27,13 @@ const plugins = []
 
 module.exports = (api, opts) => {
   const
-    quasarPath = api.resolve('./src/quasar.js'),
+    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: '^1.0.0',
+    quasar: '^2.0.0',
     '@quasar/extras': '^1.0.0'
   }
 
@@ -42,16 +42,10 @@ module.exports = (api, opts) => {
     devDependencies: {}
   }
 
-  if (opts.quasar.cssPreprocessor === 'styl') {
+  if (['sass', 'scss'].includes(opts.quasar.cssPreprocessor)) {
     Object.assign(deps.devDependencies, {
-      stylus: '^0.54.5',
-      'stylus-loader': '^3.0.2'
-    })
-  }
-  else if (['sass', 'scss'].includes(opts.quasar.cssPreprocessor)) {
-    Object.assign(deps.devDependencies, {
-      'node-sass': '^4.13.0',
-      'sass-loader': '^8.0.0'
+      'sass': '1.32.12',
+      'sass-loader': '^10.1.0'
     })
   }
 
@@ -102,64 +96,55 @@ module.exports = (api, opts) => {
   }
 
   api.onCreateComplete(() => {
-    let lines = `import Vue from 'vue'\n`
+    let qFileLines = ''
 
     const
       hasIconSet = opts.quasar.iconSet !== 'material-icons',
-      hasLang = opts.quasar.lang !== 'en-us'
+      hasLang = opts.quasar.lang !== 'en-US'
 
     if (!opts.quasar.features.includes(opts.quasar.iconSet)) {
       opts.quasar.features.push(opts.quasar.iconSet)
     }
 
     if (opts.quasar.cssPreprocessor !== 'none') {
-      lines += `\nimport './styles/quasar.${opts.quasar.cssPreprocessor}'`
+      qFileLines += `\nimport './styles/quasar.${opts.quasar.cssPreprocessor}'`
     }
     else {
-      lines += `\nimport 'quasar/dist/quasar.css'`
-    }
-
-    if (opts.quasar.features.includes('ie')) {
-      lines += `\nimport 'quasar/dist/quasar.ie.polyfills'`
+      qFileLines += `\nimport 'quasar/dist/quasar.css'`
     }
 
     if (hasIconSet) {
       const set = iconMap[opts.quasar.iconSet] || opts.quasar.iconSet
-      lines += `\nimport iconSet from 'quasar/icon-set/${set}.js'`
+      qFileLines += `\nimport iconSet from 'quasar/icon-set/${set}.js'`
     }
 
     if (hasLang) {
-      lines += `\nimport lang from 'quasar/lang/${opts.quasar.lang}.js'`
+      qFileLines += `\nimport lang from 'quasar/lang/${opts.quasar.lang}.js'`
     }
 
     opts.quasar.features
-      .filter(feat => feat !== 'ie')
       .forEach(feat => {
         feat = iconMap[feat] || feat
-        lines += `\nimport '@quasar/extras/${feat}/${feat}.css'`
+        qFileLines += `\nimport '@quasar/extras/${feat}/${feat}.css'`
       })
 
-    // build import
-    lines += `\nimport { Quasar } from 'quasar'`
-
-    // build Vue.use()
-    lines += `\n\nVue.use(Quasar, {`
-    lines += `\n  config: {}`
+    qFileLines += `\n\n// To be used on app.use(Quasar, { ... })\nexport default {`
+    qFileLines += `\n  config: {}`
 
-    lines += ',\n  plugins: {'
+    qFileLines += ',\n  plugins: {'
     plugins.forEach(part => {
-      lines += `\n   ${part},`
+      qFileLines += `\n   ${part},`
     })
-    lines += `\n  }`
+    qFileLines += `\n  }`
 
     if (hasLang) {
-      lines += `,\n  lang: lang`
+      qFileLines += `,\n  lang: lang`
     }
     if (hasIconSet) {
-      lines += `,\n  iconSet: iconSet`
+      qFileLines += `,\n  iconSet: iconSet`
     }
 
-    lines += `\n })`
+    qFileLines += `\n}`
 
     // Now inject additions to main.[js|ts]
     {
@@ -169,12 +154,13 @@ module.exports = (api, opts) => {
       const mainLines = content.split(/\r?\n/g).reverse()
 
       const index = mainLines.findIndex(line => line.match(/^import/))
-      mainLines[index] += `\nimport './quasar'`
+      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, lines, { encoding: 'utf8' })
+      fs.writeFileSync(quasarPath, qFileLines, { encoding: 'utf8' })
     }
 
     if (api.generator.hasPlugin('@vue/cli-plugin-eslint')) {

generator/templates/styl/src/styles/quasar.styl

@@ -1,5 +1,3 @@
 <template>
-  <div id="app">
-    <router-view/>
-  </div>
+  <router-view/>
 </template>

generator/templates/styl/src/styles/quasar.variables.styl

@@ -1,6 +1,6 @@
 <template>
   <q-page class="flex flex-center">
-    <img alt="Quasar logo" src="../assets/logo.svg" style="width: 200px; height: 200px;">
+    <img alt="Quasar logo" src="../assets/logo.svg" style="width: 200px; height: 200px">
   </q-page>
 </template>
 

generator/templates/with-router-base/src/App.vue

@@ -1,28 +1,30 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import DefaultLayout from './layouts/Default.vue'
 import Home from './views/Home.vue'
 import About from './views/About.vue'
 
-Vue.use(Router)
+const routes = [
+  {
+    path: '/',
+    component: DefaultLayout,
+    children: [
+      {
+        path: '',
+        name: 'home',
+        component: Home
+      },
+      {
+        path: '/about',
+        name: 'about',
+        component: About
+      }
+    ]
+  }
+]
 
-export default new Router({
-  routes: [
-    {
-      path: '/',
-      component: DefaultLayout,
-      children: [
-        {
-          path: '',
-          name: 'home',
-          component: Home
-        },
-        {
-          path: '/about',
-          name: 'about',
-          component: About
-        }
-      ]
-    }
-  ]
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
 })
+
+export default router

generator/templates/with-router-base/src/views/Home.vue

@@ -1,28 +1,30 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import DefaultLayout from './layouts/Default.vue'
 import Home from './views/Home.vue'
 import About from './views/About.vue'
 
-Vue.use(Router)
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    component: DefaultLayout,
+    children: [
+      {
+        path: '',
+        name: 'home',
+        component: Home
+      },
+      {
+        path: '/about',
+        name: 'about',
+        component: About
+      }
+    ]
+  }
+]
 
-export default new Router({
-  routes: [
-    {
-      path: '/',
-      component: DefaultLayout,
-      children: [
-        {
-          path: '',
-          name: 'home',
-          component: Home
-        },
-        {
-          path: '/about',
-          name: 'about',
-          component: About
-        }
-      ]
-    }
-  ]
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
 })
+
+export default router

generator/templates/with-router-js/src/router.js

@@ -23,7 +23,7 @@
       v-model="leftDrawerOpen"
       show-if-above
       bordered
-      content-class="bg-grey-2"
+      class="bg-grey-2"
     >
       <q-list>
         <q-item-label header>Navigation</q-item-label>
@@ -100,12 +100,14 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
 export default {
   name: 'LayoutDefault',
 
-  data () {
+  setup () {
     return {
-      leftDrawerOpen: false
+      leftDrawerOpen: ref(false)
     }
   }
 }

generator/templates/with-router-ts/src/router.ts

@@ -1,6 +1,6 @@
 <template>
   <q-page class="flex flex-center">
-    <img alt="Quasar logo" src="../assets/logo.svg" style="width: 200px; height: 200px;">
+    <img alt="Quasar logo" src="../assets/logo.svg" style="width: 200px; height: 200px">
   </q-page>
 </template>
 

generator/templates/with-router/src/layouts/Default.vue

@@ -23,7 +23,7 @@
       v-model="leftDrawerOpen"
       show-if-above
       bordered
-      content-class="bg-grey-2"
+      class="bg-grey-2"
     >
       <q-list>
         <q-item-label header>Essential Links</q-item-label>
@@ -82,6 +82,7 @@
 </template>
 
 <script>
+import { ref } from 'vue'
 import HelloWorld from './components/HelloWorld.vue'
 
 export default {
@@ -91,13 +92,10 @@ export default {
     HelloWorld
   },
 
-  data () {
+  setup () {
     return {
-      leftDrawerOpen: false
+      leftDrawerOpen: ref(false)
     }
   }
 }
 </script>
-
-<style>
-</style>