├── .editorconfig
├── .gitignore
├── .storybook
├── addons.js
└── config.js
├── README.md
├── example
├── favicon.ico
├── iframe.html
├── index.html
└── static
│ ├── 0.86d1d97820c3446ec20c.bundle.js
│ ├── 1.d8540f6b0588ad763d2c.bundle.js
│ ├── manager.700efcb74783121b4775.bundle.js
│ ├── media
│ ├── MaterialIcons-Regular.012cf6a1.woff
│ ├── Roboto-Bold.ad140ff0.woff
│ ├── Roboto-Light.37fbbbad.woff
│ ├── Roboto-Medium.303ded64.woff
│ ├── Roboto-Regular.081b11eb.woff
│ └── Roboto-Thin.90d3804f.woff
│ └── preview.fa55ca86fde5affa0001.bundle.js
├── package.json
├── src
├── App.vue
├── assets
│ ├── quasar-logo-full.svg
│ └── style.css
├── stories
│ ├── Error404.vue
│ ├── Welcome.vue
│ └── index.js
└── themes
│ ├── app.ios.styl
│ ├── app.mat.styl
│ ├── app.variables.styl
│ └── quasar.variables.styl
└── yarn.lock
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = false
10 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .thumbs.db
3 | node_modules/
4 | dist/
5 | npm-debug.log*
6 | cordova/platforms
7 | cordova/plugins
8 | .out
9 |
--------------------------------------------------------------------------------
/.storybook/addons.js:
--------------------------------------------------------------------------------
1 | import '@storybook/addon-actions/register';
2 |
--------------------------------------------------------------------------------
/.storybook/config.js:
--------------------------------------------------------------------------------
1 | import { configure } from '@storybook/vue';
2 |
3 | import Vue from 'vue';
4 | import Vuex from 'vuex';
5 | import Quasar from 'quasar-framework';
6 |
7 |
8 | import '../src/assets/style.css';
9 | import 'quasar-extras/material-icons';
10 | import 'quasar-framework/dist/quasar.mat.css';
11 | import 'quasar-extras/roboto-font';
12 |
13 | // helper for quasar start
14 | const qAppEl = document.createElement('div');
15 |
16 | qAppEl.setAttribute('id', 'q-app');
17 | document.getElementsByTagName('body')[0].appendChild(qAppEl);
18 |
19 | Vue.use(Vuex);
20 | Vue.use(Quasar);
21 |
22 | Quasar.start(() => {
23 | new Vue({
24 | el: '#q-app',
25 | render: h => h(require('../src/App.vue').default)
26 | });
27 | });
28 |
29 | function loadStories() {
30 | require('../src/stories');
31 | }
32 |
33 | configure(loadStories, module);
34 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Vue Quasar Storybook
2 |
3 | Storybook template to use with [Quasar Framework](https://github.com/quasarframework/quasar)!
4 |
5 | ## Build Setup
6 |
7 | ``` bash
8 | # Clone the project
9 | $ git clone https://github.com/imdanielpiva/vue-quasar-storybook.git
10 |
11 | # Enter the project folder
12 | $ cd vue-quasar-storybook
13 |
14 | # Install dependencies
15 | $ npm install
16 |
17 | # Storybook will start from 9001 to up
18 | $ npm run storybook
19 |
--------------------------------------------------------------------------------
/example/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imdanielpiva/vue-quasar-storybook/59b8bf14a27469a9a5ab9bd60b710a13e2bd2bf0/example/favicon.ico
--------------------------------------------------------------------------------
/example/iframe.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
14 | Storybook
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Storybook
9 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/example/static/0.86d1d97820c3446ec20c.bundle.js:
--------------------------------------------------------------------------------
1 | webpackJsonp([0],{912:function(module,__webpack_exports__,__webpack_require__){"use strict";Object.defineProperty(__webpack_exports__,"__esModule",{value:!0});var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Welcome_vue__=__webpack_require__(914),__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_154cf6b5_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Welcome_vue__=__webpack_require__(920);var __vue_styles__=function injectStyle(ssrContext){__webpack_require__(918)},Component=__webpack_require__(205)(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Welcome_vue__.a,__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_154cf6b5_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Welcome_vue__.a,!1,__vue_styles__,null,null);__webpack_exports__.default=Component.exports},914:function(module,__webpack_exports__,__webpack_require__){"use strict";var __WEBPACK_IMPORTED_MODULE_0_quasar_framework__=__webpack_require__(408);__webpack_exports__.a={name:"index",components:{QItemMain:__WEBPACK_IMPORTED_MODULE_0_quasar_framework__.c},data:()=>({xuxa:"xuxa"}),computed:{computed:()=>"fifa 2017"},methods:{},mounted(){console.log("HI, THERE! I'M HELLO.VUE SINGLE FILE COMPONENT")}}},918:function(module,exports,__webpack_require__){var content=__webpack_require__(919);"string"==typeof content&&(content=[[module.i,content,""]]),content.locals&&(module.exports=content.locals);__webpack_require__(204)("c0e2c780",content,!0)},919:function(module,exports,__webpack_require__){(module.exports=__webpack_require__(85)(!1)).push([module.i,"a{color:unset}#demo{padding:24px;border:1px solid #333}",""])},920:function(module,__webpack_exports__,__webpack_require__){"use strict";var esExports={render:function(){this.$createElement;this._self._c;return this._m(0)},staticRenderFns:[function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("div",{staticClass:"layout-padding"},[_c("div",[_c("h3",{staticClass:"light-paragraph"},[_vm._v("Welcome to Quasar Storybook!")]),_vm._v(" "),_c("p",[_vm._v("This a simple "),_c("a",{attrs:{target:"_blank",href:"http://quasar-framework.org/"}},[_vm._v("quasar-framework")]),_vm._v(" storybook template! You can use any quasar component to build your own components, then tell your story!")]),_vm._v(" "),_c("h6",[_vm._v("Get it now, just run the following code:")]),_vm._v(" "),_c("pre",[_vm._v(" $ git clone https://github.com/imdanielpiva/vue-quasar-storybook.git\n $ cd vue-quasar-storybook\n $ npm install\n $ npm run storybook\n ")]),_vm._v(" "),_c("p",{staticClass:"text-bold"},[_vm._v("It's easy to:")]),_vm._v(" "),_c("ul",[_c("li",[_vm._v("Create layouts with or without router")]),_vm._v(" "),_c("li",[_vm._v("Simply show your component use case")]),_vm._v(" "),_c("li",[_vm._v("Show your component docs")]),_vm._v(" "),_c("li",[_vm._v("Have hot-reload all set up")])])]),_vm._v(" "),_c("div",[_c("h4",{staticClass:"light-paragraph"},[_vm._v("Simple Demo with Router")]),_vm._v(" "),_c("div",{attrs:{id:"demo"}},[_c("h5",{staticClass:"text-primary"},[_vm._v("Hi, there! I'm Hello Single File Component.")])])]),_vm._v(" "),_c("div",[_c("h4",{staticClass:"light-paragraph"},[_vm._v("Introduction")]),_vm._v(" "),_c("p",[_vm._v("In order to use your components with this template, all you have to do is create your "),_c("span",{staticClass:"text-positive"},[_c("a",{attrs:{target:"_blank",href:"https://vuejs.org/v2/guide/single-file-components.html"}},[_vm._v("Vue Single File Component")])]),_vm._v("...")])])])}]};__webpack_exports__.a=esExports}});
--------------------------------------------------------------------------------
/example/static/1.d8540f6b0588ad763d2c.bundle.js:
--------------------------------------------------------------------------------
1 | webpackJsonp([1],{911:function(module,__webpack_exports__,__webpack_require__){"use strict";Object.defineProperty(__webpack_exports__,"__esModule",{value:!0});var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Error404_vue__=__webpack_require__(913),__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_e9a8cd8a_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Error404_vue__=__webpack_require__(917);var __vue_styles__=function injectStyle(ssrContext){__webpack_require__(915)},Component=__webpack_require__(205)(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Error404_vue__.a,__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_e9a8cd8a_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Error404_vue__.a,!1,__vue_styles__,null,null);__webpack_exports__.default=Component.exports},913:function(module,__webpack_exports__,__webpack_require__){"use strict";var __WEBPACK_IMPORTED_MODULE_0_quasar_framework__=__webpack_require__(408);__webpack_exports__.a={components:{QBtn:__WEBPACK_IMPORTED_MODULE_0_quasar_framework__.a,QIcon:__WEBPACK_IMPORTED_MODULE_0_quasar_framework__.b},data:()=>({canGoBack:window.history.length>1}),methods:{goBack(){window.history.go(-1)}}}},915:function(module,exports,__webpack_require__){var content=__webpack_require__(916);"string"==typeof content&&(content=[[module.i,content,""]]),content.locals&&(module.exports=content.locals);__webpack_require__(204)("df8372aa",content,!0)},916:function(module,exports,__webpack_require__){(module.exports=__webpack_require__(85)(!1)).push([module.i,".error-page .error-code{height:50vh;width:100%;padding-top:15vh;color:hsla(0,0%,100%,.2);overflow:hidden}@media (orientation:landscape){.error-page .error-code{font-size:30vw}}@media (orientation:portrait){.error-page .error-code{font-size:30vh}}.error-page .error-card{border-radius:2px;margin-top:-50px;width:80vw;max-width:600px;padding:25px}.error-page .error-card>i{font-size:5rem}",""])},917:function(module,__webpack_exports__,__webpack_require__){"use strict";var esExports={render:function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("div",{staticClass:"error-page window-height window-width bg-light column items-center no-wrap"},[_c("div",{staticClass:"error-code bg-primary flex items-center content-center justify-center"},[_vm._v("\n 404\n ")]),_vm._v(" "),_c("div",[_c("div",{staticClass:"error-card shadow-4 bg-white column items-center justify-center no-wrap"},[_c("q-icon",{attrs:{name:"error_outline",color:"grey-5"}}),_vm._v(" "),_c("p",{staticClass:"caption text-center"},[_vm._v("Oops. Nothing here...")]),_vm._v(" "),_c("p",{staticClass:"text-center group"},[_vm.canGoBack?_c("q-btn",{attrs:{color:"primary",push:"",icon:"keyboard_arrow_left"},on:{click:_vm.goBack}},[_vm._v("\n Go back\n ")]):_vm._e(),_vm._v(" "),_c("q-btn",{attrs:{color:"primary",push:"","icon-right":"home"},on:{click:function($event){_vm.$router.replace("/")}}},[_vm._v("\n Go home\n ")])],1)],1)])])},staticRenderFns:[]};__webpack_exports__.a=esExports}});
--------------------------------------------------------------------------------
/example/static/media/MaterialIcons-Regular.012cf6a1.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imdanielpiva/vue-quasar-storybook/59b8bf14a27469a9a5ab9bd60b710a13e2bd2bf0/example/static/media/MaterialIcons-Regular.012cf6a1.woff
--------------------------------------------------------------------------------
/example/static/media/Roboto-Bold.ad140ff0.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imdanielpiva/vue-quasar-storybook/59b8bf14a27469a9a5ab9bd60b710a13e2bd2bf0/example/static/media/Roboto-Bold.ad140ff0.woff
--------------------------------------------------------------------------------
/example/static/media/Roboto-Light.37fbbbad.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imdanielpiva/vue-quasar-storybook/59b8bf14a27469a9a5ab9bd60b710a13e2bd2bf0/example/static/media/Roboto-Light.37fbbbad.woff
--------------------------------------------------------------------------------
/example/static/media/Roboto-Medium.303ded64.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imdanielpiva/vue-quasar-storybook/59b8bf14a27469a9a5ab9bd60b710a13e2bd2bf0/example/static/media/Roboto-Medium.303ded64.woff
--------------------------------------------------------------------------------
/example/static/media/Roboto-Regular.081b11eb.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imdanielpiva/vue-quasar-storybook/59b8bf14a27469a9a5ab9bd60b710a13e2bd2bf0/example/static/media/Roboto-Regular.081b11eb.woff
--------------------------------------------------------------------------------
/example/static/media/Roboto-Thin.90d3804f.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imdanielpiva/vue-quasar-storybook/59b8bf14a27469a9a5ab9bd60b710a13e2bd2bf0/example/static/media/Roboto-Thin.90d3804f.woff
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-quasar-storybook",
3 | "productName": "Quasar Storybook Template",
4 | "version": "0.0.1",
5 | "private": false,
6 | "description": "Quasar Storybook Template",
7 | "author": "daniel piva ",
8 | "scripts": {
9 | "storybook": "start-storybook -p 9001 -c .storybook",
10 | "build": "build-storybook -c .storybook -o example"
11 | },
12 | "dependencies": {
13 | "@storybook/vue": "^3.3.9",
14 | "babel-runtime": "^6.25.0",
15 | "quasar-extras": "0.x",
16 | "quasar-framework": "^0.14.4",
17 | "storybook-router": "^0.3.2",
18 | "vue": "^2.5.0",
19 | "vue-router": "^3.0.1",
20 | "vuex": "^3.0.1"
21 | },
22 | "devDependencies": {
23 | "autoprefixer": "^6.4.0",
24 | "babel-core": "^6.0.0",
25 | "babel-eslint": "^7.0.0",
26 | "babel-loader": "^7.1.2",
27 | "babel-plugin-transform-runtime": "^6.0.0",
28 | "babel-preset-es2015": "^6.0.0",
29 | "babel-preset-stage-2": "^6.0.0",
30 | "colors": "^1.1.2",
31 | "connect-history-api-fallback": "^1.1.0",
32 | "css-loader": "^0.28.7",
33 | "es6-promise": "^4.1.1",
34 | "eslint": "^4.8.0",
35 | "eslint-config-standard": "^10.2.1",
36 | "eslint-friendly-formatter": "^3.0.0",
37 | "eslint-loader": "^1.9.0",
38 | "eslint-plugin-html": "^3.2.2",
39 | "eslint-plugin-import": "^2.7.0",
40 | "eslint-plugin-node": "^5.2.0",
41 | "eslint-plugin-promise": "^3.5.0",
42 | "eslint-plugin-standard": "^3.0.1",
43 | "eventsource-polyfill": "^0.9.6",
44 | "express": "^4.16.1",
45 | "extract-text-webpack-plugin": "^3.0.0",
46 | "file-loader": "^0.11.1",
47 | "friendly-errors-webpack-plugin": "^1.1.3",
48 | "glob": "^7.1.2",
49 | "html-webpack-plugin": "^2.30.1",
50 | "http-proxy-middleware": "^0.17.0",
51 | "json-loader": "^0.5.7",
52 | "opn": "^5.0.0",
53 | "optimize-css-assets-webpack-plugin": "^3.2.0",
54 | "postcss-loader": "^1.0.0",
55 | "progress-bar-webpack-plugin": "^1.10.0",
56 | "purify-css": "^1.2.6",
57 | "shelljs": "^0.7.0",
58 | "stylus": "^0.54.5",
59 | "stylus-loader": "^3.0.1",
60 | "url-loader": "^0.5.7",
61 | "vue-loader": "^13.0.5",
62 | "vue-style-loader": "^3.0.3",
63 | "vue-template-compiler": "^2.5.0",
64 | "webpack": "^3.6.0",
65 | "webpack-dev-middleware": "^1.12.0",
66 | "webpack-hot-middleware": "^2.19.1",
67 | "webpack-merge": "^4.1.0"
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/assets/quasar-logo-full.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
192 |
--------------------------------------------------------------------------------
/src/assets/style.css:
--------------------------------------------------------------------------------
1 | .margin-12 {
2 | margin: 12px !important;
3 | }
4 |
--------------------------------------------------------------------------------
/src/stories/Error404.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 404
5 |
6 |
7 |
8 |
9 |
Oops. Nothing here...
10 |
11 |
18 | Go back
19 |
20 |
26 | Go home
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
54 |
55 |
78 |
--------------------------------------------------------------------------------
/src/stories/Welcome.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Welcome to Quasar Storybook!
5 |
This a simple quasar-framework storybook template! You can use any quasar component to build your own components, then tell your story!
6 |
Get it now, just run the following code:
7 |
8 | $ git clone https://github.com/imdanielpiva/vue-quasar-storybook.git
9 | $ cd vue-quasar-storybook
10 | $ npm install
11 | $ npm run storybook
12 |
13 |
It's easy to:
14 |
15 | - Create layouts with or without router
16 | - Simply show your component use case
17 | - Show your component docs
18 | - Have hot-reload all set up
19 |
20 |
21 |
22 |
Simple Demo with Router
23 |
24 |
Hi, there! I'm Hello Single File Component.
25 |
26 |
27 |
28 |
Introduction
29 |
In order to use your components with this template, all you have to do is create your Vue Single File Component...
30 |
31 |
32 |
33 |
34 |
61 |
62 |
72 |
73 |
--------------------------------------------------------------------------------
/src/stories/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 |
3 | import { storiesOf } from '@storybook/vue';
4 | import StoryRouter from 'storybook-router';
5 |
6 | import { QBtn } from 'quasar-framework';
7 |
8 | storiesOf('Welcome', module)
9 | .addDecorator(StoryRouter({},
10 | {
11 | initialEntry: '/',
12 | routes: [
13 | {
14 | path: '/',
15 | name: 'Welcome',
16 | component: load('Welcome')
17 | }
18 | ]
19 | }))
20 | .add('Introduction', () => ({
21 | template: ''
22 | }));
23 |
24 | function load (component) {
25 | return () => import(`./${component}.vue`)
26 | }
27 |
--------------------------------------------------------------------------------
/src/themes/app.ios.styl:
--------------------------------------------------------------------------------
1 | // This file is included in the build if src/main.js imports it.
2 | // Otherwise the default iOS CSS file is bundled.
3 | // Check "DEFAULT / CUSTOM STYLE" in src/main.js
4 |
5 | // App Shared Variables
6 | // --------------------------------------------------
7 | // Shared Stylus variables go in the app.variables.styl file
8 | @import 'app.variables'
9 |
10 | // Quasar iOS Design Stylus
11 | // --------------------------------------------------
12 | // Custom App variables must be declared before importing Quasar.
13 | // Quasar will use its default values when a custom variable isn't provided.
14 | @import '~quasar-framework/dist/quasar.ios.styl'
15 |
--------------------------------------------------------------------------------
/src/themes/app.mat.styl:
--------------------------------------------------------------------------------
1 | // This file is included in the build if src/main.js imports it.
2 | // Otherwise the default Material CSS file is bundled.
3 | // Check "DEFAULT / CUSTOM STYLE" in src/main.js
4 |
5 | // App Shared Variables
6 | // --------------------------------------------------
7 | // Shared Stylus variables go in the app.variables.styl file
8 | @import 'app.variables'
9 |
10 | // Quasar Material Design Stylus
11 | // --------------------------------------------------
12 | // Custom App variables must be declared before importing Quasar.
13 | // Quasar will use its default values when a custom variable isn't provided.
14 | @import '~quasar-framework/dist/quasar.mat.styl'
15 |
--------------------------------------------------------------------------------
/src/themes/app.variables.styl:
--------------------------------------------------------------------------------
1 | // This file is included in the build if src/main.js imports
2 | // either app.mat.styl or app.ios.styl.
3 | // Check "DEFAULT / CUSTOM STYLE" in src/main.js
4 |
5 | // App Shared Variables
6 | // --------------------------------------------------
7 | // To customize the look and feel of this app, you can override
8 | // the Stylus variables found in Quasar's source Stylus files. Setting
9 | // variables before Quasar's Stylus will use these variables rather than
10 | // Quasar's default Stylus variable values. Stylus variables specific
11 | // to the themes belong in either the app.ios.styl or app.mat.styl files.
12 |
13 |
14 | // App Shared Color Variables
15 | // --------------------------------------------------
16 | // It's highly recommended to change the default colors
17 | // to match your app's branding.
18 |
19 | $primary = #027be3
20 | $secondary = #26A69A
21 | $tertiary = #555
22 |
23 | $neutral = #E0E1E2
24 | $positive = #21BA45
25 | $negative = #DB2828
26 | $info = #31CCEC
27 | $warning = #F2C037
28 |
--------------------------------------------------------------------------------
/src/themes/quasar.variables.styl:
--------------------------------------------------------------------------------
1 | //
2 | // Webpack alias "variables" points to this file.
3 | // So you can import it in your app's *.vue files
4 | // inside the
12 |
13 |
14 | // First we load app's Stylus variables
15 | @import 'app.variables'
16 |
17 | // Then we load Quasar Stylus variables.
18 | // Any variables defined in "app.variables.styl"
19 | // will override Quasar's ones.
20 | //
21 | // NOTICE that we only import Core Quasar Variables
22 | // like colors, media breakpoints, and so.
23 | // No component variable will be included.
24 | @import '~quasar/dist/core.variables'
25 |
--------------------------------------------------------------------------------