feat(docs): Part of "how to use vue"

Author: rstoenescu

docs/.eslintrc.js

@@ -48,6 +48,7 @@ module.exports = {
     'import/extensions': 'off',
     'import/no-unresolved': 'off',
     'import/no-extraneous-dependencies': 'off',
+    'import/no-webpack-loader-syntax': 'off',
 
     // allow console.log during development only
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',

docs/quasar.conf.js

@@ -30,6 +30,7 @@ module.exports = function (ctx) {
       // extractCSS: false,
       extendWebpack (cfg) {
         cfg.resolve.alias.examples = path.resolve(__dirname, 'src/examples')
+        cfg.resolve.alias.markup = path.resolve(__dirname, 'src/markup')
 
         cfg.module.rules.push({
           test: /\.pug$/,
@@ -42,7 +43,7 @@ module.exports = function (ctx) {
           loader: 'eslint-loader',
           exclude: /node_modules/,
           options: {
-            cache: true
+            // cache: true
           }
         })
       }

docs/src/boot/components.js

@@ -7,7 +7,7 @@ import InstallationCard from 'components/InstallationCard.vue'
 import DocToken from 'components/DocToken.vue'
 import DocLink from 'components/DocLink.vue'
 import DocSection from 'components/DocSection.vue'
-import DocWarning from 'components/DocWarning.vue'
+import DocNote from 'components/DocNote.vue'
 import DocPage from 'components/DocPage.vue'
 
 // leave the export, even if you don't use it
@@ -20,6 +20,6 @@ export default async ({ Vue }) => {
   Vue.component('DocToken', DocToken)
   Vue.component('DocLink', DocLink)
   Vue.component('DocSection', DocSection)
-  Vue.component('DocWarning', DocWarning)
+  Vue.component('DocNote', DocNote)
   Vue.component('DocPage', DocPage)
 }

docs/src/components/CodePrism.js

@@ -3,6 +3,8 @@ import 'prismjs/themes/prism-okaidia.css'
 import 'prismjs/components/prism-bash.js'
 import 'prismjs/components/prism-javascript.js'
 import 'prismjs/components/prism-stylus.js'
+import 'prismjs/components/prism-css.js'
+import 'prismjs/components/prism-json.js'
 
 export default {
   functional: true,

docs/src/components/DocLink.vue

@@ -43,6 +43,7 @@ export default {
   vertical-align center
   transition opacity .2s
   margin 0 4px
+  white-space nowrap
 
   &:hover
     opacity .8

docs/src/components/DocWarning.vue docs/src/components/DocNote.vuedocs/src/components/DocWarning.vue renamed to docs/src/components/DocNote.vue

@@ -1,26 +1,23 @@
 <template lang="pug">
-.doc-warning
-  strong {{ title }}
+.doc-note
+  div(v-if="title").text-weight-bold {{ title }}
   slot
 </template>
 
 <script>
 export default {
-  name: 'DocWarning',
+  name: 'DocNote',
 
   props: {
-    title: {
-      type: String,
-      default: 'WARNING'
-    }
+    title: String
   }
 }
 </script>
 
 <style lang="stylus">
 @import '~quasar-variables'
 
-.doc-warning
+.doc-note
   background $grey-4
   border-radius $generic-border-radius
   margin 16px 0

docs/src/markup/notify.html

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <q-btn
+      @click="$q.notify('My message')"
+      color="primary"
+      label="Show a notification"
+    />
+
+    <q-btn
+      @click="showNotification"
+      color="primary"
+      label="Show another notification"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    showNotification () {
+      this.$q.notify('Some other message')
+    }
+  }
+}
+</script>

docs/src/markup/sfc-style.html

@@ -0,0 +1,5 @@
+<!-- notice lang="stylus" -->
+<style lang="stylus">
+.some-div
+  font-size 15px
+</style>

docs/src/markup/sfc.html

@@ -0,0 +1,18 @@
+<template>
+  <!-- you define your Vue template here -->
+</template>
+
+<script>
+// This is where your Javascript goes
+// to define your Vue component, which
+// can be a Layout, a Page or your own
+// component used throughout the app.
+
+export default {
+  //
+}
+</script>
+
+<style>
+/* This is where your CSS goes */
+</style>

docs/src/pages/docs.vue

@@ -16,7 +16,7 @@ doc-page(
   p Some code markup
 
   p Warning
-  doc-warning
+  doc-note
     div Not supported in IE11.
 
   p Some code markup