├── generator ├── template │ ├── public │ │ └── favicon.ico │ └── src │ │ ├── assets │ │ └── logo.png │ │ ├── App.vue │ │ └── components │ │ └── HelloWorld.vue ├── index.js └── files.js ├── index.js ├── package.json ├── LICENSE ├── CHANGELOG.md └── README.md /generator/template/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webdenim/vue-cli-plugin-material/HEAD/generator/template/public/favicon.ico -------------------------------------------------------------------------------- /generator/template/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webdenim/vue-cli-plugin-material/HEAD/generator/template/src/assets/logo.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = (api, projectOptions) => { 2 | api.configureWebpack(webpackConfig => { 3 | const scssRule = webpackConfig.module.rules.find(rule => { 4 | return rule.test.test('.scss') 5 | }) 6 | 7 | const scssLoader = scssRule.oneOf[1].use.find(rule => { 8 | return rule.loader === 'sass-loader' 9 | }) 10 | 11 | Object.assign(scssLoader.options, {includePaths: [api.resolve('node_modules')]}) 12 | }) 13 | } 14 | -------------------------------------------------------------------------------- /generator/index.js: -------------------------------------------------------------------------------- 1 | const updateFiles = require('./files') 2 | 3 | module.exports = (api, opts) => { 4 | api.extendPackage({ 5 | dependencies: { 6 | 'material-components-web': '^0.35.0', 7 | 'vue-mdc-adapter': '^0.15.0' 8 | }, 9 | devDependencies: { 10 | 'node-sass': '^4.9.0', 11 | 'sass-loader': '^7.0.1' 12 | } 13 | }) 14 | 15 | api.render('./template') 16 | 17 | api.postProcessFiles(files => { 18 | updateFiles(api, opts, files) 19 | }) 20 | } 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli-plugin-material", 3 | "version": "0.2.3", 4 | "description": "Vue CLI plugin for MDC Web and Vue MDC Adapter with Sass support.", 5 | "keywords": [ 6 | "vue", 7 | "vuejs", 8 | "vue-cli", 9 | "vue-cli-plugin", 10 | "vue-mdc-adapter", 11 | "material", 12 | "material-design", 13 | "material-components", 14 | "mdc-web", 15 | "plugin" 16 | ], 17 | "homepage": "https://github.com/webdenim/vue-cli-plugin-material", 18 | "bugs": { 19 | "url": "https://github.com/webdenim/vue-cli-plugin-material/issues" 20 | }, 21 | "license": "MIT", 22 | "author": "Webdenim", 23 | "main": "index.js", 24 | "repository": { 25 | "type": "git", 26 | "url": "git+https://github.com/webdenim/vue-cli-plugin-material.git" 27 | }, 28 | "scripts": { 29 | "release": "standard-version --tag-prefix", 30 | "test": "echo TODO: make tests" 31 | }, 32 | "devDependencies": { 33 | "standard-version": "^5.0.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /generator/files.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | 3 | module.exports = (api, opts, files) => { 4 | // Update src/main.js 5 | const mainJS = files['src/main.js'] 6 | if (mainJS) { 7 | // inject import for registerServiceWorker script into mainJS.js 8 | let lines = mainJS.split(/\r?\n/g).reverse() 9 | let lastImportIndex = lines.findIndex(line => line.match(/^import/)) 10 | 11 | lines[lastImportIndex] += `\nimport VueMDCAdapter from 'vue-mdc-adapter'` 12 | lines[lastImportIndex] += `\n` 13 | lines[lastImportIndex] += `\nVue.use(VueMDCAdapter)` 14 | 15 | files['src/main.js'] = lines.reverse().join('\n') 16 | } 17 | 18 | // Update public/index.html 19 | const indexHTML = files['public/index.html'] 20 | if (indexHTML) { 21 | let lines = indexHTML.split(/\r?\n/g).reverse() 22 | let title = lines.findIndex((line) => line.match(/^\s*` 25 | 26 | files['public/index.html'] = lines.reverse().join('\n') 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Webdenim 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 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ## [0.2.3](https://github.com/webdenim/vue-cli-plugin-material/compare/0.2.2...0.2.3) (2019-02-27) 6 | 7 | 8 | 9 | <a name="0.2.2"></a> 10 | ## [0.2.2](https://github.com/webdenim/vue-cli-plugin-material/compare/0.2.1...0.2.2) (2018-05-21) 11 | 12 | 13 | 14 | <a name="0.2.1"></a> 15 | ## [0.2.1](https://github.com/webdenim/vue-cli-plugin-material/compare/0.2.0...0.2.1) (2018-05-14) 16 | 17 | 18 | ### Bug Fixes 19 | 20 | * fix Webpack config merging ([0e1b397](https://github.com/webdenim/vue-cli-plugin-material/commit/0e1b397)) 21 | 22 | 23 | 24 | <a name="0.2.0"></a> 25 | # [0.2.0](https://github.com/webdenim/vue-cli-plugin-material/compare/0.1.0...0.2.0) (2018-05-13) 26 | 27 | 28 | ### Bug Fixes 29 | 30 | * replace SCSS one-line comments with CSS multi-line comments until problem investigated ([6695080](https://github.com/webdenim/vue-cli-plugin-material/commit/6695080)) 31 | 32 | 33 | ### Features 34 | 35 | * upgrade to vue-cli@3.0.0-beta.10 ([224b8b0](https://github.com/webdenim/vue-cli-plugin-material/commit/224b8b0)) 36 | 37 | 38 | 39 | <a name="0.1.0"></a> 40 | # 0.1.0 (2018-05-07) 41 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-cli-plugin-material 2 | 3 | [vue-cli-plugin-material](https://github.com/webdenim/vue-cli-plugin-material) is a Vue CLI plugin 4 | to help you get started with Material Design Components for Vue.js. 5 | 6 | This plugin will: 7 | 8 | - Add [Material Components Web](https://github.com/material-components/material-components-web) 9 | and [Vue MDC Adapter](https://github.com/stasson/vue-mdc-adapter) to your project's `dependencies` 10 | - Add node-sass and sass-loader to your project's `devDependencies` 11 | - Configure Webpack for using Material Components Web's Sass (SCSS) files 12 | - Add required import to your `main.js` file 13 | - Add Roboto font and Material Icons to your `index.html` 14 | 15 | ## Prerequisites 16 | 17 | This is a plugin for @vue/cli@^3.0.0-beta.10 and Webpack 4, so it's assumed you have [vue-cli](https://github.com/vuejs/vue-cli) installed: 18 | 19 | ```bash 20 | npm i -g @vue/cli 21 | ``` 22 | 23 | ## Installation 24 | 25 | Create your new project with Vue CLI: 26 | 27 | ```bash 28 | vue create my-project 29 | ``` 30 | 31 | Then, go into your project's folder and add the plugin: 32 | 33 | ```bash 34 | cd my-project 35 | vue add material 36 | ``` 37 | 38 | Finally, serve your project which will be available at http://localhost:8080: 39 | 40 | ```bash 41 | npm run serve 42 | ``` 43 | -------------------------------------------------------------------------------- /generator/template/src/App.vue: -------------------------------------------------------------------------------- 1 | <template> 2 | <div class="app"> 3 | <hello-world class="app__hello" 4 | title="Welcome to your Vue MDC Adapter App" 5 | :vmaLinks="vmaLinks" 6 | :mdcLinks="mdcLinks"> 7 | </hello-world> 8 | </div> 9 | </template> 10 | 11 | <script> 12 | import HelloWorld from './components/HelloWorld.vue' 13 | 14 | export default { 15 | data () { 16 | return { 17 | vmaLinks: [ 18 | { 19 | title: 'Documentation', 20 | url: 'https://stasson.github.io/vue-mdc-adapter' 21 | }, 22 | { 23 | title: 'GitHub', 24 | url: 'https://github.com/stasson/vue-mdc-adapter' 25 | }, 26 | { 27 | title: 'Twitter', 28 | url: 'https://twitter.com/vuemdc' 29 | }, 30 | { 31 | title: 'Chat', 32 | url: 'https://gitter.im/vue-mdc-adapter/Lobby' 33 | } 34 | ], 35 | mdcLinks: [ 36 | { 37 | title: 'Documentation', 38 | url: 'https://material.io/components/web/' 39 | }, 40 | { 41 | title: 'GitHub', 42 | url: 'https://github.com/material-components/material-components-web' 43 | }, 44 | { 45 | title: 'Guidelines', 46 | url: 'https://material.io/guidelines' 47 | }, 48 | { 49 | title: 'Awesome Material Components', 50 | url: 'https://github.com/webdenim/awesome-material-components' 51 | } 52 | ] 53 | } 54 | }, 55 | components: { HelloWorld } 56 | } 57 | </script> 58 | 59 | <style lang="scss"> 60 | // First, set the value for variable 61 | $mdc-typography-font-family: "Roboto Mono", monospace; 62 | 63 | // Then, import required files 64 | @import "@material/typography/mixins"; 65 | 66 | html { 67 | width: 100%; 68 | height: 100%; 69 | } 70 | 71 | body { 72 | @include mdc-typography(body2); 73 | 74 | width: 100%; 75 | min-height: 100%; 76 | margin: 0; 77 | } 78 | </style> 79 | -------------------------------------------------------------------------------- /generator/template/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | <template> 2 | <div class="hello"> 3 | <div class="hello__hero"> 4 | <mdc-layout-grid> 5 | <mdc-layout-cell desktop="12" tablet="8" phone="4"> 6 | <img class="hello__logo" src="../assets/logo.png" alt="Vue MDC Adapter"> 7 | <h1 class="hello__title">{{ title }}</h1> 8 | <p class="hello__blurb"> 9 | <a href="https://github.com/webdenim/vue-cli-plugin-material" target="_blank" rel="noopener">vue-cli-plugin-material</a> is a Vue CLI plugin to help you get started with Material Design Components for Vue.js. It's created and maintained by <a href="https://twitter.com/rustemgareev" target="_blank" rel="noopener">Rustem Gareev</a> at <a href="https://www.webdenim.io/" target="_blank" rel="noopener">Webdenim</a>. 10 | <a href="https://github.com/rustemgareev" target="_blank" rel="noopener">Follow me on GitHub</a> to get news and updates on other Vue.js and Material Design-related stuff. 11 | </p> 12 | </mdc-layout-cell> 13 | </mdc-layout-grid> 14 | </div> 15 | 16 | <div class="hello__content"> 17 | <mdc-layout-grid> 18 | <mdc-layout-cell desktop="6" tablet="4" phone="4"> 19 | <h3 class="hello__subtitle">Vue MDC Adapter Links</h3> 20 | <ul class="hello__links"> 21 | <li v-for="(link, idx) in vmaLinks" :key="idx"> 22 | <a :href="link.url" target="_blank" rel="noopener">{{ link.title }}</a> 23 | </li> 24 | </ul> 25 | </mdc-layout-cell> 26 | 27 | <mdc-layout-cell desktop="6" tablet="4" phone="4"> 28 | <h3 class="hello__subtitle">Material Components Links</h3> 29 | <ul class="hello__links"> 30 | <li v-for="(link, idx) in mdcLinks" :key="idx"> 31 | <a :href="link.url" target="_blank" rel="noopener">{{ link.title }}</a> 32 | </li> 33 | </ul> 34 | </mdc-layout-cell> 35 | </mdc-layout-grid> 36 | </div> 37 | </div> 38 | </template> 39 | 40 | <script> 41 | export default { 42 | name: 'HelloWorld', 43 | props: { 44 | title: String, 45 | vmaLinks: Array, 46 | mdcLinks: Array 47 | } 48 | } 49 | </script> 50 | 51 | <style lang="scss"> 52 | // First, set the value for variable 53 | $mdc-layout-grid-max-width: 800px; 54 | 55 | // Then, import required files 56 | @import "@material/layout-grid/mdc-layout-grid"; 57 | @import "@material/rtl/mixins"; 58 | @import "@material/theme/color-palette"; 59 | @import "@material/theme/mixins"; 60 | 61 | .hello { 62 | &__hero { 63 | @include mdc-theme-prop(color, text-primary-on-dark); 64 | 65 | padding: 2.5rem 0; 66 | background-color: $material-color-grey-900; 67 | 68 | @media (min-width: 480px) { 69 | text-align: center; 70 | } 71 | 72 | a { 73 | @include mdc-theme-prop(color, text-primary-on-dark); 74 | } 75 | } 76 | 77 | &__logo { 78 | width: 144px; 79 | 80 | @media (min-width: 840px) { 81 | width: 192px; 82 | } 83 | } 84 | 85 | &__title { 86 | margin-top: 0; 87 | font-size: 2.125rem; 88 | font-weight: 400; 89 | line-height: 2.625rem; 90 | } 91 | 92 | &__blurb { 93 | line-height: 1.5rem; 94 | } 95 | 96 | &__content { 97 | padding: 2.5rem 0; 98 | } 99 | 100 | &__subtitle { 101 | margin: 0; 102 | font-size: 1rem; 103 | font-weight: 500; 104 | line-height: 1.75rem; 105 | } 106 | 107 | &__links { 108 | @include mdc-rtl-reflexive-box(padding, left, 0); 109 | 110 | list-style: inside disc; 111 | 112 | li { 113 | padding-bottom: .5rem; 114 | } 115 | 116 | a { 117 | @include mdc-theme-prop(color, text-primary-on-background); 118 | } 119 | } 120 | } 121 | </style> 122 | --------------------------------------------------------------------------------