├── .circleci └── config.yml ├── .editorconfig ├── .eslintrc.js ├── .github ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── LICENSE ├── README.md ├── lib ├── assets │ ├── app.styl │ └── themes │ │ ├── common.variables.styl │ │ ├── variables.ios.styl │ │ └── variables.mat.styl ├── install.js ├── module.js └── templates │ └── plugin.js ├── package.json └── test ├── fixture ├── nuxt.config.js └── pages │ ├── btn.vue │ ├── carousel.vue │ ├── index.vue │ ├── layout.vue │ ├── parallax.vue │ └── tabs.vue └── module.test.js /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | jobs: 3 | build: 4 | working_directory: /usr/src/app 5 | docker: 6 | - image: banian/node 7 | steps: 8 | # Checkout repository 9 | - checkout 10 | 11 | # Restore cache 12 | - restore_cache: 13 | key: yarn-{{ checksum "yarn.lock" }} 14 | 15 | # Install dependencies 16 | - run: 17 | name: Install Dependencies 18 | command: NODE_ENV=dev yarn 19 | 20 | # Keep cache 21 | - save_cache: 22 | key: yarn-{{ checksum "yarn.lock" }} 23 | paths: 24 | - "node_modules" 25 | 26 | # Test 27 | - run: 28 | name: Tests 29 | command: yarn test 30 | 31 | # Coverage 32 | - run: 33 | name: Coverage 34 | command: yarn codecov 35 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | sourceType: 'module' 5 | }, 6 | env: { 7 | browser: true, 8 | node: true, 9 | jest: true 10 | }, 11 | extends: 'standard', 12 | plugins: [ 13 | 'jest', 14 | 'vue' 15 | ], 16 | rules: { 17 | 'brace-style': [2, 'stroustrup', { 'allowSingleLine': true }], 18 | 19 | // Allow paren-less arrow functions 20 | 'arrow-parens': 0, 21 | // multiple declarations 22 | 'one-var': 0, 23 | // Allow async-await 24 | 'generator-star-spacing': 0, 25 | // Allow debugger during development 26 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 27 | // Do not allow console.logs etc... 28 | 'no-console': 2 29 | }, 30 | globals: { 31 | 'jest/globals': true, 32 | jasmine: true 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct 2 | 3 | As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities. 4 | 5 | We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion. 6 | 7 | Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct. 8 | 9 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team. 10 | 11 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers. 12 | 13 | This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/) 14 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Quasar Contributing Guide 2 | 3 | Hi! I’m really excited that you are interested in contributing to Quasar. Before submitting your contribution though, please make sure to take a moment and read through the following guidelines. 4 | 5 | - [Code of Conduct](https://github.com/quasarframework/quasar/blob/dev/.github/CODE_OF_CONDUCT.md) 6 | - [Issue Reporting Guidelines](#issue-reporting-guidelines) 7 | - [Pull Request Guidelines](#pull-request-guidelines) 8 | - [Development Setup](#development-setup) 9 | - [Project Structure](#project-structure) 10 | 11 | ## Issue Reporting Guidelines 12 | 13 | - The issue list of this repo is **exclusively** for bug reports and feature requests. Non-conforming issues will be closed immediately. 14 | 15 | - For simple beginner questions, you can get quick answers from the [Quasar Discord chat](http://chat.quasar-framework.org). 16 | 17 | - For more complicated questions, you can use [the official forum](https://forum.quasar-framework.org/). Make sure to provide enough information when asking your questions - this makes it easier for others to help you! 18 | 19 | - Try to search for your issue, it may have already been answered or even fixed in the development branch (`dev`). 20 | 21 | - Check if the issue is reproducible with the latest stable version of Quasar. If you are using a pre-release, please indicate the specific version you are using. 22 | 23 | - It is **required** that you clearly describe the steps necessary to reproduce the issue you are running into. Although we would love to help our users as much as possible, diagnosing issues without clear reproduction steps is extremely time-consuming and simply not sustainable. 24 | 25 | - Use only the minimum amount of code necessary to reproduce the unexpected behavior. A good bug report should isolate specific methods that exhibit unexpected behavior and precisely define how expectations were violated. What did you expect the method or methods to do, and how did the observed behavior differ? The more precisely you isolate the issue, the faster we can investigate. 26 | 27 | - Issues with no clear repro steps will not be triaged. If an issue labeled "need repro" receives no further input from the issue author for more than 5 days, it will be closed. 28 | 29 | - 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. 30 | 31 | - Most importantly, we beg your patience: the team must balance your request against many other responsibilities — fixing other bugs, answering other questions, new features, new documentation, etc. The issue list is not paid support and we cannot make guarantees about how fast your issue can be resolved. 32 | 33 | ## Pull Request Guidelines 34 | 35 | - The `master` branch is basically just a snapshot of the latest stable release. All development should be done in dedicated branches. **Do not submit PRs against the `master` branch.** 36 | 37 | - Checkout a topic branch from the relevant branch, e.g. `dev`, and merge back against that branch. 38 | 39 | - It's OK to have multiple small commits as you work on the PR - we will let GitHub automatically squash it before merging. 40 | 41 | - If adding new feature: 42 | - Provide convincing reason to add this feature. Ideally you should open a suggestion issue first and have it green-lighted before working on it. 43 | 44 | - If fixing a bug: 45 | - If you are resolving a special issue, add `(fix: #xxxx[,#xxx])` (#xxxx is the issue id) in your PR title for a better release log, e.g. `fix: update entities encoding/decoding (fix #3899)`. 46 | - Provide detailed description of the bug in the PR. Live demo preferred. 47 | 48 | ## Development 49 | 50 | - Clone this repository 51 | - Install dependencies using `yarn install` or `npm install` 52 | - Start development server using `yarn dev` or `npm run dev` 53 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 29 | 30 | 31 | ### Software version 32 | 33 | quasar-nuxt: 34 | OS: 35 | Node: 36 | NPM: 37 | Browsers: 38 | Any other software related to your bug: 39 | 40 | ### JsFiddle (for Quasar v0.15+ only) 41 | 42 | 43 | ### What did you get as the error? 44 | 45 | ### What were you expecting? 46 | 47 | ### What steps did you take, to get the error? 48 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | **What kind of change does this PR introduce?** (check at least one) 10 | 11 | - [ ] Bugfix 12 | - [ ] Feature 13 | - [ ] Code style update 14 | - [ ] Refactor 15 | - [ ] Build-related changes 16 | - [ ] Other, please describe: 17 | 18 | **Does this PR introduce a breaking change?** (check one) 19 | 20 | - [ ] Yes 21 | - [ ] No 22 | 23 | If yes, please describe the impact and migration path for existing applications: 24 | 25 | **The PR fulfills these requirements:** 26 | 27 | - [ ] It's submitted to the `dev` branch and _not_ the `master` branch 28 | - [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. `fix: #xxx[,#xxx]`, where "xxx" is the issue number) 29 | - [ ] It's been tested with all Quasar themes 30 | - [ ] Any necessary documentation has been added or updated [in the docs](https://github.com/quasarframework/quasar-framework.org/tree/dev/source) (for faster update click on "Suggest an edit on GitHub" at bottom of page) or explained in the PR's description. 31 | 32 | If adding a **new feature**, the PR's description includes: 33 | - [ ] A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it) 34 | 35 | **Other information:** 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.iml 3 | .idea 4 | *.log* 5 | .nuxt 6 | .vscode 7 | .DS_STORE 8 | coverage 9 | dist -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Razvan Stoenescu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Attention! 2 | Not enough development time to finalize this. This Quasar project has been discontinued until further notice. 3 | 4 | ![Quasar Framework logo](https://cdn.rawgit.com/quasarframework/quasar-art/863c14bd/dist/svg/quasar-logo-full-inline.svg) 5 | 6 | # Quasar Framework 7 | 8 | > Build responsive websites, PWAs, hybrid mobile Apps (that look native!) and Electron apps using same code, powered with Vue. 9 | 10 | # quasar-nuxt (WORK IN PROGRESS) 11 | 12 | [![Join the chat at https://discord.gg/5TDhbDg](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/5TDhbDg) 13 | 14 | 15 | > Nuxt Module for Quasar Framework 16 | 17 | ## Supporting Quasar 18 | 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). 19 | 20 | ### Proudly sponsored by: 21 | 22 | [![Truelogic](http://quasar-framework.org/images/logo_truelogic.png)](http://truelogic.com) 23 | 24 | ## Setup 25 | - Add `quasar-nuxt` dependency using yarn or npm to your project 26 | - Add `quasar-nuxt` to `modules` section of `nuxt.config.js` 27 | 28 | ```js 29 | { 30 | modules: [ 31 | // Simple usage 32 | 'quasar-nuxt' 33 | ], 34 | 35 | quasar: { 36 | // ... config 37 | } 38 | } 39 | ``` 40 | 41 | ## Dependencies 42 | - stylus 43 | - stylus-loader 44 | 45 | These should be installed using the usual `yarn add` or `npm install` methods into your NUXT project. 46 | 47 | ## Notes 48 | During the installation process, `quasar-nuxt` will automagically generate the necessary stylus files in order for you to be able to fully customise the look and feel of Quasar and import Quasar variables into your NUXT components. These files can be located at `~assets/quasar/app.styl` and `~assets/quasar/themes/*` so as to remain in-line with the cli starter kit folder structure. 49 | 50 | ```css 51 | 56 | ``` 57 | 58 | ## Development 59 | 60 | - Clone this repository 61 | - Install dependencies using `yarn install` or `npm install` 62 | - Start development server using `yarn dev` or `npm run dev` 63 | 64 | ## Documentation 65 | 66 | Head on to the Quasar Framework official website: [http://quasar-framework.org](http://quasar-framework.org) 67 | 68 | ## Stay in Touch 69 | 70 | For latest releases and announcements, follow on Twitter: [@quasarframework](https://twitter.com/quasarframework) 71 | 72 | ## Community Forum 73 | 74 | Head on to the official community forum: [http://forum.quasar-framework.org](http://forum.quasar-framework.org) 75 | 76 | ## License 77 | 78 | [MIT License](./LICENSE) 79 | 80 | Copyright (c) Razvan Stoenescu 81 | -------------------------------------------------------------------------------- /lib/assets/app.styl: -------------------------------------------------------------------------------- 1 | // app global css 2 | -------------------------------------------------------------------------------- /lib/assets/themes/common.variables.styl: -------------------------------------------------------------------------------- 1 | // App Shared Variables 2 | // -------------------------------------------------- 3 | // To customize the look and feel of this app, you can override 4 | // the Stylus variables found in Quasar's source Stylus files. Setting 5 | // variables before Quasar's Stylus will use these variables rather than 6 | // Quasar's default Stylus variable values. Stylus variables specific 7 | // to the themes belong in either the variables.ios.styl or variables.mat.styl files. 8 | 9 | // Check documentation for full list of Quasar variables 10 | 11 | 12 | // App Shared Color Variables 13 | // -------------------------------------------------- 14 | // It's highly recommended to change the default colors 15 | // to match your app's branding. 16 | 17 | $primary = #027be3 18 | $secondary = #26A69A 19 | $tertiary = #555 20 | 21 | $neutral = #E0E1E2 22 | $positive = #21BA45 23 | $negative = #DB2828 24 | $info = #31CCEC 25 | $warning = #F2C037 26 | -------------------------------------------------------------------------------- /lib/assets/themes/variables.ios.styl: -------------------------------------------------------------------------------- 1 | // App Shared Variables 2 | // -------------------------------------------------- 3 | // Shared Stylus variables go in the common.variables.styl file 4 | @import 'common.variables' 5 | 6 | // iOS only Quasar variables overwrites 7 | // ----------------------------------------- 8 | -------------------------------------------------------------------------------- /lib/assets/themes/variables.mat.styl: -------------------------------------------------------------------------------- 1 | // App Shared Variables 2 | // -------------------------------------------------- 3 | // Shared Stylus variables go in the common.variables.styl file 4 | @import 'common.variables' 5 | 6 | // Material only Quasar variables overwrites 7 | // ----------------------------------------- 8 | -------------------------------------------------------------------------------- /lib/install.js: -------------------------------------------------------------------------------- 1 | const { join, resolve } = require('path') 2 | const { 3 | copyFileSync, existsSync, mkdirSync, 4 | readdirSync, statSync 5 | } = require('fs') 6 | 7 | // helper paths 8 | const assetsRoot = resolve(__dirname, 'assets') 9 | const projectRoot = resolve(__dirname, '../../../') 10 | const projectAssetsPath = resolve(projectRoot, 'assets') 11 | const quasarAssetsPath = resolve(projectAssetsPath, 'quasar') 12 | const quasarAssetsThemesPath = resolve(quasarAssetsPath, 'themes') 13 | 14 | // helper method 15 | const recursiveReaddirSync = (dir) => { 16 | return readdirSync(dir).reduce((files, file) => { 17 | const fileName = join(dir, file) 18 | const isDirectory = statSync(fileName).isDirectory() 19 | 20 | return isDirectory ? [ 21 | ...files, ...recursiveReaddirSync(fileName) 22 | ] : [ 23 | ...files, fileName 24 | ] 25 | }, []) 26 | } 27 | 28 | // grab a list of theme files 29 | const themeFiles = recursiveReaddirSync(assetsRoot) 30 | 31 | /* 32 | if this is a fresh install or ~assets/quasar does not already exist in 33 | the project root, then create the default stylus files to aid users 34 | */ 35 | if (existsSync(projectAssetsPath) && !existsSync(quasarAssetsPath)) { 36 | mkdirSync(quasarAssetsPath) 37 | mkdirSync(quasarAssetsThemesPath) 38 | 39 | // copy theme files into project 40 | themeFiles.forEach(themeFile => { 41 | copyFileSync( 42 | themeFile, 43 | join(quasarAssetsPath, themeFile.replace(assetsRoot, '')) 44 | ) 45 | }) 46 | } 47 | -------------------------------------------------------------------------------- /lib/module.js: -------------------------------------------------------------------------------- 1 | const 2 | os = require('os'), 3 | { join, resolve } = require('path'), 4 | merge = require('webpack-merge'), 5 | { mkdirSync, writeFileSync, existsSync } = require('fs'), 6 | debug = require('debug')('nuxt:build (Quasar): ') 7 | 8 | const defaults = { 9 | theme: 'mat', 10 | supportIE: false, 11 | extras: [], 12 | framework: { 13 | all: true, 14 | config: {} 15 | }, 16 | animations: false 17 | } 18 | 19 | const cdn = { 20 | fontawesome: '//use.fontawesome.com/releases/v5.0.13/css/all.css', 21 | ionicons: '//cdn.jsdelivr.net/npm/ionicons@^4.0.0/dist/css/ionicons.min.css', 22 | mdi: '//cdn.jsdelivr.net/npm/@mdi/font@^2.0.0/css/materialdesignicons.min.css', 23 | animations: '//cdn.jsdelivr.net/npm/animate.css@^3.5.2/animate.min.css' 24 | } 25 | 26 | module.exports = async function module (moduleOptions) { 27 | const 28 | opts = merge({}, defaults, this.options.quasar, moduleOptions), 29 | cdnCSS = [] 30 | 31 | if (opts.extras) { 32 | const googleFont = [] 33 | 34 | opts.extras.filter(asset => asset).forEach(asset => { 35 | if (asset === 'material-icons') { 36 | googleFont.push('Material+Icons') 37 | } 38 | else if (asset === 'roboto') { 39 | googleFont.push('Roboto:100,300,400,500,700,900') 40 | } 41 | else if (cdn[asset]) { 42 | cdnCSS.push(cdn[asset]) 43 | } 44 | }) 45 | 46 | if (googleFont.length > 0) { 47 | cdnCSS.push('//fonts.googleapis.com/css?family=' + googleFont.join('|')) 48 | } 49 | } 50 | 51 | if (opts.animations) { 52 | cdnCSS.push(cdn.animations) 53 | } 54 | 55 | cdnCSS.forEach(href => { 56 | this.options.head.link.push({ 57 | rel: 'stylesheet', 58 | type: 'text/css', 59 | href 60 | }) 61 | }) 62 | 63 | /** 64 | * this section handles stylus inclusions and overrides for the Quasar Framework. 65 | * it will check for the presence of a quasar theme and associated files in the project 66 | * root dir: ~/assets/quasar and load it if it exists. 67 | * 68 | * we also enable a webpack 'resolve' alias for importing Quasar stylus variables 69 | * into the SFC's/components inside the tags. 70 | */ 71 | let rootOptions = this.options 72 | let quasarVariablesStylusPath = resolve(rootOptions.rootDir, `assets/quasar/themes/variables.${opts.theme}.styl`) 73 | let quasarAppStylusPath = resolve(rootOptions.rootDir, `assets/quasar/app.styl`) 74 | 75 | const tmpPath = join(os.tmpdir(), '/.quasar') 76 | const outFile = join(tmpPath, 'quasar.styl') 77 | 78 | // always include base theme stylus file 79 | const outFiles = [`~quasar-framework/src/css/${opts.theme}.styl`] 80 | 81 | // custom stylus variable overrides must go first in the queue 82 | if (existsSync(quasarVariablesStylusPath)) { 83 | outFiles.unshift(quasarVariablesStylusPath) 84 | 85 | debug( 86 | 'Overriding stylus variables with', 87 | quasarVariablesStylusPath.replace(rootOptions.rootDir, '~') 88 | ) 89 | } 90 | 91 | // app/global styles must go last in the queue 92 | if (existsSync(quasarAppStylusPath)) { 93 | outFiles.push(quasarAppStylusPath) 94 | 95 | debug( 96 | 'Including general \'app\' styles from', 97 | quasarAppStylusPath.replace(rootOptions.rootDir, '~') 98 | ) 99 | } 100 | 101 | // combine 102 | const outContent = outFiles 103 | .map(v => v.replace(/\\/g, '\\\\')) // replace backslash by double backslash (needed for windows) 104 | .map(v => `@import "${v}"`) 105 | .join('\n') 106 | 107 | // on first run, make a .tmp folder 108 | if (!existsSync(tmpPath)) { 109 | mkdirSync(tmpPath) 110 | } 111 | 112 | // output combined stylus file 113 | writeFileSync(outFile, outContent, 'utf8') 114 | 115 | // include it 116 | rootOptions.css.push(outFile) 117 | 118 | // our queue is larger then the default (1) 119 | if (outFiles.length > 1) { 120 | debug('Custom stylus files have been merged successfully') 121 | } 122 | 123 | this.extendBuild(config => { 124 | config.resolve.alias.quasar = `quasar-framework/dist/quasar.${opts.theme}.esm.js` 125 | config.resolve.alias['variables'] = resolve(rootOptions.rootDir, 'node_modules/quasar-framework/src/css/core.variables.styl') 126 | /* 127 | .alias 128 | .set('variables', api.resolve(`src/styles/quasar.variables.styl`)) 129 | .set('quasar-variables', api.resolve(`node_modules/quasar-framework/dist/core.variables.styl`)) 130 | .set('quasar-styl', api.resolve(`node_modules/quasar-framework/dist/quasar.${theme}.styl`)) 131 | */ 132 | }) 133 | 134 | this.addPlugin({ 135 | src: resolve(__dirname, './templates/plugin.js'), 136 | fileName: 'quasar-nuxt.js', 137 | options: opts 138 | }) 139 | } 140 | -------------------------------------------------------------------------------- /lib/templates/plugin.js: -------------------------------------------------------------------------------- 1 | <% if (options.supportIE) { %> 2 | import 'quasar-framework/dist/quasar.ie.polyfills' 3 | <% } 4 | 5 | let importStatement, useStatement = [ `config: ${JSON.stringify(options.framework.config)}` ] 6 | 7 | if (options.framework.i18n) { %> 8 | import lang from 'babel-loader!quasar-framework/i18n/<%= options.framework.i18n %>' 9 | <% 10 | useStatement.push('i18n: lang') 11 | } 12 | 13 | if (options.framework.iconSet) { %> 14 | import iconSet from 'babel-loader!quasar-framework/icons/<%= options.framework.iconSet %>' 15 | <% 16 | useStatement.push('iconSet: iconSet') 17 | } 18 | 19 | if (options.framework === 'all' || options.framework.all) { 20 | importStatement = ', * as All' 21 | useStatement.push( 22 | 'components: All', 23 | 'directives: All', 24 | 'plugins: All' 25 | ) 26 | } 27 | else { 28 | importStatement = [] 29 | 30 | ;['components', 'directives', 'plugins'].forEach(type => { 31 | if (options.framework[type]) { 32 | let items = options.framework[type].filter(item => item) 33 | if (items.length > 0) { 34 | useStatement.push(type + ': {' + items.join(',') + '}') 35 | importStatement = importStatement.concat(items) 36 | } 37 | } 38 | }) 39 | } 40 | %> 41 | 42 | import Vue from 'vue' 43 | import Quasar<%= importStatement || '' %> from 'quasar' 44 | 45 | const opts = <%= '{' + useStatement.join(',') + '}' %> 46 | Vue.use(Quasar, opts) 47 | 48 | let prevBodyAttr 49 | 50 | export default ({ app, req, res }) => { 51 | const ctx = { app } 52 | 53 | if (process.server) { 54 | ctx.ssr = { 55 | app, 56 | req, 57 | res, 58 | setBodyClasses (cls) { 59 | app.head.bodyAttrs = app.head.bodyAttrs || {} 60 | let attrs = app.head.bodyAttrs['class'] || '' 61 | 62 | if (prevBodyAttr && attrs) { 63 | attrs = attrs.replace(prevBodyAttr, '').replace(' ', ' ') 64 | } 65 | 66 | prevBodyAttr = cls.join(' ') 67 | 68 | app.head.bodyAttrs['class'] = attrs 69 | ? attrs + ' ' + prevBodyAttr 70 | : prevBodyAttr 71 | }, 72 | setHtmlAttrs (attrs) { 73 | app.head.htmlAttrs = app.head.htmlAttrs || {} 74 | Object.assign(app.head.htmlAttrs, attrs) 75 | } 76 | } 77 | } 78 | 79 | Quasar.ssrUpdate(ctx) 80 | } 81 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar-nuxt", 3 | "version": "0.17.0-alpha.1", 4 | "description": "Nuxt Module for Quasar Framework", 5 | "license": "MIT", 6 | "contributors": [ 7 | { 8 | "name": "Razvan Stoenescu " 9 | } 10 | ], 11 | "main": "lib/module.js", 12 | "repository": "https://github.com/quasarframework/quasar-nuxt", 13 | "publishConfig": { 14 | "access": "public" 15 | }, 16 | "scripts": { 17 | "postinstall": "node ./lib/install.js", 18 | "dev": "nuxt test/fixture", 19 | "lint": "eslint lib test", 20 | "test": "npm run lint && jest", 21 | "release": "standard-version && git push --follow-tags && npm publish" 22 | }, 23 | "eslintIgnore": [ 24 | "lib/templates/*.*" 25 | ], 26 | "files": [ 27 | "lib" 28 | ], 29 | "jest": { 30 | "testEnvironment": "node", 31 | "collectCoverage": true 32 | }, 33 | "dependencies": { 34 | "quasar-framework": "^0.17.6", 35 | "webpack-merge": "^4.1.2" 36 | }, 37 | "devDependencies": { 38 | "codecov": "latest", 39 | "eslint": "4.19.1", 40 | "eslint-config-standard": "latest", 41 | "eslint-plugin-import": "latest", 42 | "eslint-plugin-jest": "latest", 43 | "eslint-plugin-node": "latest", 44 | "eslint-plugin-promise": "latest", 45 | "eslint-plugin-standard": "latest", 46 | "eslint-plugin-vue": "latest", 47 | "jest": "latest", 48 | "jsdom": "latest", 49 | "nuxt": "latest", 50 | "standard-version": "latest" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /test/fixture/nuxt.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | rootDir: resolve(__dirname, '../..'), 5 | srcDir: __dirname, 6 | dev: false, 7 | render: { 8 | resourceHints: false 9 | }, 10 | modules: ['@@'], 11 | quasar: { 12 | theme: 'mat', 13 | extras: [ 14 | 'material-icons', 15 | 'ionicons' 16 | ], 17 | framework: { 18 | components: ['QBtn'], 19 | iconSet: 'ionicons' 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /test/fixture/pages/btn.vue: -------------------------------------------------------------------------------- 1 | 483 | 484 | 563 | -------------------------------------------------------------------------------- /test/fixture/pages/carousel.vue: -------------------------------------------------------------------------------- 1 | 330 | 331 | 352 | 353 | -------------------------------------------------------------------------------- /test/fixture/pages/index.vue: -------------------------------------------------------------------------------- 1 | 388 | 389 | 474 | -------------------------------------------------------------------------------- /test/fixture/pages/layout.vue: -------------------------------------------------------------------------------- 1 | 388 | 389 | 474 | -------------------------------------------------------------------------------- /test/fixture/pages/parallax.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 59 | 60 | 65 | -------------------------------------------------------------------------------- /test/fixture/pages/tabs.vue: -------------------------------------------------------------------------------- 1 | 236 | 237 | 330 | 331 | -------------------------------------------------------------------------------- /test/module.test.js: -------------------------------------------------------------------------------- 1 | const { Nuxt, Builder } = require('nuxt') 2 | const request = require('request-promise-native') 3 | 4 | const config = require('./fixture/nuxt.config') 5 | 6 | const url = path => `http://localhost:3000${path}` 7 | const get = path => request(url(path)) 8 | 9 | describe('basic', () => { 10 | let nuxt 11 | 12 | beforeAll(async () => { 13 | nuxt = new Nuxt(config) 14 | await new Builder(nuxt).build() 15 | await nuxt.listen(3000) 16 | }, 60000) 17 | 18 | afterAll(async () => { 19 | await nuxt.close() 20 | }) 21 | 22 | test('render', async () => { 23 | let html = await get('/') 24 | expect(html).toContain('Works!') 25 | expect(html).toContain('q-btn-inner') 26 | }) 27 | }) 28 | --------------------------------------------------------------------------------