feat(docs): Add @quasar/vite-plugin docs

isbase · Oct 25, 2021 · ab38db6 · ab38db6
1 parent a96d351
commit ab38db6
Show file tree

Hide file tree

Showing 15 changed files with 520 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 > Build high-performance VueJS user interfaces in record time: responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid Mobile Apps and Electron Apps. If you want, all using the same codebase!
 
-<img src="https://img.shields.io/npm/v/quasar?label=quasar"> <img src="https://img.shields.io/npm/v/%40quasar/app?label=@quasar/app"> <img src="https://img.shields.io/npm/v/%40quasar/cli?label=@quasar/cli"> <img src="https://img.shields.io/npm/v/%40quasar/extras.svg?label=@quasar/extras"> <img src="https://img.shields.io/npm/v/%40quasar/icongenie.svg?label=@quasar/icongenie">
+<img src="https://img.shields.io/npm/v/quasar?label=quasar"> <img src="https://img.shields.io/npm/v/%40quasar/app?label=@quasar/app"> <img src="https://img.shields.io/npm/v/%40quasar/cli?label=@quasar/cli"> <img src="https://img.shields.io/npm/v/%40quasar/extras.svg?label=@quasar/extras"> <img src="https://img.shields.io/npm/v/%40quasar/icongenie.svg?label=@quasar/icongenie"> <img src="https://img.shields.io/npm/v/%40quasar/vite-plugin.svg?label=@quasar/vite-plugin">
 
 [![Join the chat at https://chat.quasar.dev](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://chat.quasar.dev)
 <a href="https://forum.quasar.dev" target="_blank"><img src="https://img.shields.io/badge/community-forum-brightgreen.svg"></a>

diff --git a/docs/src/assets/menu.js b/docs/src/assets/menu.js
@@ -15,6 +15,11 @@ const gettingStarted = [
         name: 'UMD / Standalone',
         path: 'umd'
       },
+      {
+        name: 'Vite Plugin',
+        badge: 'new',
+        path: 'vite-plugin'
+      },
       {
         name: 'Vue CLI Plugin',
         path: 'vue-cli-plugin'
@@ -1259,7 +1264,6 @@ module.exports = [
   {
     name: 'API Explorer',
     icon: 'travel_explore',
-    badge: 'new',
     path: 'api-explorer'
   },
   {

diff --git a/docs/src/components/DocInstallation.vue b/docs/src/components/DocInstallation.vue
@@ -2,10 +2,11 @@
 q-card.doc-installation.q-my-lg(flat, bordered)
   q-tabs.text-grey-7.bg-white(v-model="currentTab", align="left", indicator-color="brand-primary", dense, :breakpoint="0")
     q-tab(
-      v-for="tab in ['Quasar CLI', 'UMD', 'Vue CLI']"
+      v-for="tab in ['Quasar CLI', 'Vite plugin / Vue CLI', 'UMD']"
       :key="`installation-${tab}`"
       :name="tab"
       :label="tab"
+      no-caps
     )
 
   q-separator
@@ -14,11 +15,11 @@ q-card.doc-installation.q-my-lg(flat, bordered)
     q-tab-panel.q-pa-none(name="Quasar CLI")
       doc-code(:code="QuasarCli")
 
+    q-tab-panel.q-pa-none(name="Vite plugin / Vue CLI")
+      doc-code(:code="ExternalCli")
+
     q-tab-panel.q-pa-none(name="UMD")
       doc-code(:code="UMD")
-
-    q-tab-panel.q-pa-none(name="Vue CLI")
-      doc-code(:code="VueCli")
 </template>
 
 <script>
@@ -110,7 +111,7 @@ app.use(Quasar, {
       return content + config
     })
 
-    const VueCli = computed(() => {
+    const ExternalCli = computed(() => {
       const types = [], imports = []
 
       ;[ 'components', 'directives', 'plugins' ].forEach(type => {
@@ -145,7 +146,7 @@ app.use(Quasar, {
 
       QuasarCli,
       UMD,
-      VueCli
+      ExternalCli
     }
   }
 }

diff --git a/docs/src/components/page-parts/theming/ThemePicker.vue b/docs/src/components/page-parts/theming/ThemePicker.vue
@@ -76,7 +76,7 @@
         q-tab(name="sass", no-caps, label="Sass")
         q-tab(name="scss", no-caps, label="SCSS")
         q-tab(name="quasar-cli", no-caps, label="Quasar CLI")
-        q-tab(name="umd", no-caps, label="UMD / Vue CLI")
+        q-tab(name="umd", no-caps, label="Vite / UMD / Vue CLI")
 
       q-separator
 

diff --git a/docs/src/components/page-parts/umd/UmdTags.vue b/docs/src/components/page-parts/umd/UmdTags.vue
@@ -1,12 +1,12 @@
 <template lang="pug">
 q-card(flat bordered)
-  q-card-section.q-gutter-xs
+  q-card-section.q-gutter-xs.q-pa-sm
     q-toggle(v-model="css.roboto" label="Roboto font")
     q-toggle(v-model="css.animate" label="Animate.css")
 
   q-separator
 
-  q-card-section.q-gutter-xs
+  q-card-section.q-gutter-xs.q-pa-sm
     q-toggle(v-model="css['material-icons']" label="Material Icons")
     q-toggle(v-model="css['material-icons-outlined']" label="Material Icons (Outlined)")
     q-toggle(v-model="css['material-icons-round']" label="Material Icons (Round)")
@@ -23,14 +23,14 @@ q-card(flat bordered)
 
   q-separator
 
-  q-card-section.q-gutter-xs
+  q-card-section.q-gutter-xs.q-pa-sm
     q-toggle(v-model="cfgObject" label="Quasar Config Object")
     q-toggle(v-model="minified" label="Minified files")
     q-toggle(v-model="rtl" label="RTL CSS support")
 
   q-separator
 
-  q-card-section.q-col-gutter-sm.row
+  q-card-section.q-col-gutter-sm.q-pa-sm.row
     .col-xs-12.col-md-6
       q-select(
         label="Quasar Language Pack"