├── .editorconfig ├── .eslintrc.json ├── .gitattributes ├── .gitignore ├── .prettierrc.json ├── LICENSE ├── index.js ├── laravel.md ├── package-lock.json ├── package.json ├── readme.md ├── src ├── getPath.js ├── resolveFile.js ├── resolveOptions.js └── resolveParameter.js └── tests ├── resolve-file.test.js └── resolve-parameter.test.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | end_of_line = lf 10 | max_line_length = off 11 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["eslint:recommended", "plugin:prettier/recommended"], 3 | "parser": "babel-eslint", 4 | "env": { 5 | "node": true, 6 | "browser": true, 7 | "es6": true, 8 | "jest": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto eol=lf 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | **/.vscode/ 3 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "none", 3 | "tabWidth": 4, 4 | "semi": false, 5 | "singleQuote": true 6 | } 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2021 Andy Song 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 13 | all 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 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const mix = require('laravel-mix') 2 | const getPath = require('./src/getPath') 3 | const resolveOptions = require('./src/resolveOptions') 4 | 5 | class Vuetify { 6 | constructor() { 7 | this.vuetifyPath = getPath('node_modules/vuetify') 8 | } 9 | 10 | withVuetifyLoader() { 11 | return this.vuetifyLoader === 'vuetify-loader' 12 | } 13 | 14 | withExtract() { 15 | return !!this.extract 16 | } 17 | 18 | withPostcss() { 19 | return !!this.postcss 20 | } 21 | 22 | register(loader, ...options) { 23 | this.vuetifyLoader = loader 24 | this.resolve(options) 25 | } 26 | 27 | resolve(options) { 28 | const resolved = resolveOptions(options) 29 | this.vuetifyLoaderOptions = resolved.vuetifyLoaderOptions 30 | this.sassArray = resolved.sassArray 31 | this.extract = resolved.extract 32 | this.postcss = resolved.postcss 33 | } 34 | 35 | dependencies() { 36 | this.requiresReload = true 37 | 38 | const deps = ['vuetify', 'sass', 'sass-loader', 'deepmerge'] 39 | 40 | if (this.withVuetifyLoader()) deps.push('vuetify-loader@next') 41 | 42 | if (this.withExtract()) deps.push('mini-css-extract-plugin') 43 | 44 | if (this.withPostcss()) deps.push('postcss-loader') 45 | 46 | return deps 47 | } 48 | 49 | generateRules() { 50 | return this.sassArray.map((t) => ({ 51 | test: t.sass, 52 | include: [this.vuetifyPath], 53 | use: [ 54 | this.withExtract() 55 | ? require('mini-css-extract-plugin').loader 56 | : 'vue-style-loader', 57 | 'css-loader', 58 | ...this.addPostcssIfNeeded(), 59 | { 60 | loader: 'sass-loader', 61 | options: { 62 | additionalData: t.data, 63 | implementation: require('sass'), 64 | sassOptions: { 65 | indentedSyntax: true 66 | } 67 | } 68 | } 69 | ] 70 | })) 71 | } 72 | 73 | webpackRules() { 74 | return this.generateRules() 75 | } 76 | 77 | webpackConfig(config) { 78 | this.excludeVuetifyPath(config) 79 | 80 | if (this.withVuetifyLoader()) this.addVuetifyLoader(config) 81 | 82 | if (this.withExtract()) this.addExtract(config) 83 | } 84 | 85 | addPostcssIfNeeded() { 86 | return this.withPostcss() ? ['postcss-loader'] : [] 87 | } 88 | 89 | addVuetifyLoader(config) { 90 | const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin') 91 | 92 | config.plugins.push(new VuetifyLoaderPlugin(this.vuetifyLoaderOptions)) 93 | } 94 | 95 | addExtract(config) { 96 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 97 | 98 | config.plugins.push( 99 | new MiniCssExtractPlugin({ filename: this.extract }) 100 | ) 101 | } 102 | 103 | excludeVuetifyPath(config) { 104 | for (const i of this.sassArray) 105 | config.module.rules 106 | .find((r) => String(r.test) === String(i.sass)) 107 | .exclude.push(this.vuetifyPath) 108 | } 109 | } 110 | 111 | mix.extend('vuetify', new Vuetify()) 112 | -------------------------------------------------------------------------------- /laravel.md: -------------------------------------------------------------------------------- 1 | # For Laravel User 2 | 3 | **NOTE: This is for mix version `^5.0.0`, you can find the mix version `^6.0.0` examples [here](https://github.com/Nothing-Works/vuetifyjs-mix-extension/blob/master/readme.md)** 4 | 5 | ## Install laravel and scaffolding vue. 6 | 7 | ```bash 8 | laravel new mix 9 | composer require laravel/ui 10 | php artisan ui vue 11 | npm i 12 | ``` 13 | 14 | ## Install package 15 | 16 | ```bash 17 | npm i vuetifyjs-mix-extension -D 18 | ``` 19 | 20 | ## Configure laravel-mix file 21 | 22 | ```js 23 | const mix = require('laravel-mix') 24 | 25 | require('vuetifyjs-mix-extension') 26 | 27 | mix.js('resources/js/app.js', 'public/js').vuetify() 28 | //if you use vuetify-loader 29 | mix.js('resources/js/app.js', 'public/js').vuetify('vuetify-loader') 30 | ``` 31 | 32 | ## Create a plugin file for Vuetify, `src/plugins/vuetify.js` with the below content: 33 | 34 | ```js 35 | // src/plugins/vuetify.js 36 | 37 | import Vue from 'vue' 38 | import Vuetify from 'vuetify' 39 | import 'vuetify/dist/vuetify.min.css' 40 | 41 | Vue.use(Vuetify) 42 | 43 | const opts = {} 44 | 45 | export default new Vuetify(opts) 46 | ``` 47 | 48 | ## If using `vuetify-loader` use the content below: 49 | 50 | ```js 51 | // src/plugins/vuetify.js 52 | 53 | import Vue from 'vue' 54 | import Vuetify from 'vuetify/lib' 55 | 56 | Vue.use(Vuetify) 57 | 58 | const opts = {} 59 | 60 | export default new Vuetify(opts) 61 | ``` 62 | 63 | ## Navigate to your main entry point where you instantiate your Vue instance and pass the Vuetify object in as an option. 64 | 65 | ```js 66 | // src/main.js 67 | 68 | import Vue from 'vue' 69 | import vuetify from '@/plugins/vuetify' // path to vuetify export 70 | 71 | new Vue({ 72 | vuetify 73 | }).$mount('#app') 74 | ``` 75 | 76 | ## Font installation The simplest way to install these are to include their CDN's in your main `index.html`. 77 | 78 | ```html 79 | 83 | 87 | ``` 88 | 89 | ## Now All done. just run 90 | 91 | ```bash 92 | npm run dev 93 | ``` 94 | 95 | **NOTE:** the first time you run this it's going to install all the required dependency. So you need to run `npm run dev` again to compile all your assets. 96 | 97 | ## SASS variables 98 | 99 | **NOTE:** This is only supported when using `tree-shaking` 100 | 101 | By default it's going to look at your root directory `'resources/sass/variables.scss'` file. It's going to use that file, if it exists. 102 | 103 | You can also give it a different path, for example: 104 | 105 | ```js 106 | mix.js('resources/js/app.js', 'public/js').vuetify( 107 | 'vuetify-loader', 108 | 'src/path/to/variables.scss' 109 | ) 110 | ``` 111 | 112 | ## Progressive images 113 | 114 | If you want to use [Progressive images feature](https://github.com/vuetifyjs/vuetify-loader#progressive-images), it is also easy to configure. 115 | 116 | **NOTE:** You **_must_** have [ImageMagick](https://www.imagemagick.org/script/index.php), [GraphicsMagick](http://www.graphicsmagick.org/), or [sharp](https://github.com/lovell/sharp) installed for this to work. 117 | 118 | All you need to do is to pass the `progressiveImages` options in when you enable `vuetify-loader`. 119 | 120 | Here is an example: 121 | 122 | ```js 123 | const options = { progressiveImages: true } 124 | mix.js('resources/js/app.js', 'public/js').vuetify('vuetify-loader', options) 125 | ``` 126 | 127 | Of course you can pass more options to it, it works the same as the `vuetify-loader` [doc](https://github.com/vuetifyjs/vuetify-loader/blob/master/README.md#configuration). 128 | 129 | **Finally, if you use both `Progressive images` and `SASS variables`, just pass both arguments after `'vuetify-loader'`. The order of the arguments does not matter** 130 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuetifyjs-mix-extension", 3 | "version": "0.0.20", 4 | "description": "Vuetifyjs Setup for Laravel Mix extensions", 5 | "author": { 6 | "name": "Andy Song", 7 | "email": "andylauszp@gmail.com", 8 | "url": "https://github.com/Nothing-Works" 9 | }, 10 | "scripts": { 11 | "test": "jest" 12 | }, 13 | "main": "index.js", 14 | "keywords": [ 15 | "laravel", 16 | "laravel mix", 17 | "mix", 18 | "vuetifyjs", 19 | "vuetify js", 20 | "vuetify-js", 21 | "vuetify" 22 | ], 23 | "repository": { 24 | "type": "git", 25 | "url": "https://github.com/Nothing-Works/vuetifyjs-mix-extension" 26 | }, 27 | "bugs": { 28 | "url": "https://github.com/Nothing-Works/vuetifyjs-mix-extension/issues" 29 | }, 30 | "license": "MIT", 31 | "peerDependencies": { 32 | "laravel-mix": ">=5.0.4", 33 | "sass-loader": ">=9.0.2" 34 | }, 35 | "devDependencies": { 36 | "babel-eslint": "^10.1.0", 37 | "eslint": "^7.6.0", 38 | "eslint-config-prettier": "^7.2.0", 39 | "eslint-plugin-prettier": "^3.1.4", 40 | "jest": "^26.2.2", 41 | "prettier": "^2.0.5" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 |

2 | npm 3 | npm 4 | NPM 5 |

6 | 7 | # Vuetify Laravel Mix Extension 8 | 9 | ## Usage 10 | 11 | ### If you are a Laravel user, here are some useful [instructions](https://github.com/Nothing-Works/vuetifyjs-mix-extension/blob/master/laravel.md). 12 | 13 | **NOTE: This extension only supports `sass-loader` `^9.0.0` ATM.** 14 | 15 | **Highly recommend updating you mix version to `^6.0.0`, as it provides much better experience and much faster.** 16 | 17 | **The code snippets are for mix `^6.0.0`, if you are still not convinced and want to use mix version `^5.0.0` see [the old api here](https://github.com/Nothing-Works/vuetifyjs-mix-extension/blob/master/laravel.md)** 18 | 19 | 1. Install 20 | 21 | ```bash 22 | npm i vuetifyjs-mix-extension@0.0.20 -D 23 | ``` 24 | 25 | 2. Then require the extension in your Mix configuration: 26 | 27 | ```js 28 | const mix = require('laravel-mix') 29 | 30 | require('vuetifyjs-mix-extension') 31 | ``` 32 | 33 | 3. Enable the extension by calling `vuetify()` in your Mix chain: 34 | 35 | ```js 36 | mix.js('resources/js/app.js', 'public/js').vuetify().vue() 37 | //if you use vuetify-loader 38 | mix.js('resources/js/app.js', 'public/js').vuetify('vuetify-loader').vue() 39 | ``` 40 | 41 | 4. Run npm script 42 | 43 | ```bash 44 | npm run dev 45 | ``` 46 | 47 | ## SASS variables 48 | 49 | **NOTE:** This is only supported when using `tree-shaking` 50 | 51 | By default it's going to look at your root directory `'resources/sass/variables.scss'` file. It's going to use that file, if it exists. 52 | 53 | You can also give it a different path, for example: 54 | 55 | ```js 56 | mix.js('resources/js/app.js', 'public/js') 57 | .vuetify('vuetify-loader', 'src/path/to/variables.scss') 58 | .vue() 59 | ``` 60 | 61 | ## Progressive images 62 | 63 | If you want to use [Progressive images feature](https://github.com/vuetifyjs/vuetify-loader#progressive-images), it is also easy to configure. 64 | 65 | **NOTE:** You **_must_** have [ImageMagick](https://www.imagemagick.org/script/index.php), [GraphicsMagick](http://www.graphicsmagick.org/), or [sharp](https://github.com/lovell/sharp) installed for this to work. 66 | 67 | All you need to do is to pass the `progressiveImages` options in when you enable `vuetify-loader`. 68 | 69 | Here is an example: 70 | 71 | ```js 72 | const options = { progressiveImages: true } 73 | mix.js('resources/js/app.js', 'public/js') 74 | .vuetify('vuetify-loader', options) 75 | .vue() 76 | ``` 77 | 78 | Of course you can pass more options to it, it works the same as the `vuetify-loader` [doc](https://github.com/vuetifyjs/vuetify-loader/blob/master/README.md#configuration). 79 | 80 | **Finally, if you use both `Progressive images` and `SASS variables`, just pass both arguments after `'vuetify-loader'`. The order of the arguments does not matter** 81 | 82 | ## Extract css 83 | 84 | To extract all Vuetify components css, pass the `extract` option. 85 | 86 | ```js 87 | mix.js('resources/js/app.js', 'public/js') 88 | .vuetify('vuetify-loader', { 89 | extract: 'css/vuetify-components.css' 90 | }) 91 | .vue() 92 | ``` 93 | 94 | ## Postcss support 95 | 96 | ```js 97 | mix.js('resources/js/app.js', 'public/js').vuetify('', { postcss: true }).vue() 98 | ``` 99 | 100 | ## known issue (for existing plugin users 26/01/2021) 101 | 102 | If you are using mix `^6.0.0` you should face this error, `Error: Cannot find module 'webpack/lib/RuleSet'` 103 | 104 | This is because the `vuetify-loader` current release is not supported webpack 5, the `@next` version has the webpack 5 support. 105 | 106 | There are two ways you can solve this error (assuming you have the latest version of this plugin which is `0.0.20`): 107 | 108 | 1. `npm uninstall vuetify-loader` and then run you compile scripts. 109 | 110 | 2. Just simply update `vuetify-loader` to `@next` by running `npm i vuetify-loader@next -D` 111 | 112 | If you use this plugin for the first time, you should not face this. 113 | 114 | ## License 115 | 116 | The MIT License (MIT). Please see [License File](LICENSE) for more information. 117 | -------------------------------------------------------------------------------- /src/getPath.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | function getPath(file) { 4 | if (file === null) return null 5 | 6 | let rootPath = process.env.PWD 7 | 8 | if (typeof rootPath === 'undefined') rootPath = process.cwd() 9 | 10 | return path.resolve(rootPath, file) 11 | } 12 | 13 | module.exports = getPath 14 | -------------------------------------------------------------------------------- /src/resolveFile.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const getPath = require('./getPath') 3 | 4 | function resolveFile(file) { 5 | const filePath = getPath(file) 6 | 7 | const defaultPath = getPath('resources/sass/variables.scss') 8 | 9 | if (fs.existsSync(filePath)) return filePath 10 | 11 | if (fs.existsSync(defaultPath)) return defaultPath 12 | 13 | return null 14 | } 15 | 16 | module.exports = resolveFile 17 | -------------------------------------------------------------------------------- /src/resolveOptions.js: -------------------------------------------------------------------------------- 1 | const rp = require('./resolveParameter') 2 | const rf = require('./resolveFile') 3 | 4 | function resolveOptions(args) { 5 | const { file, option } = rp(args) 6 | 7 | const resolvedFile = rf(file) 8 | 9 | const sassArray = [ 10 | { 11 | sass: /\.sass$/, 12 | data: resolvedFile ? `@import ${resolvedFile}` : undefined 13 | }, 14 | { 15 | sass: /\.scss$/, 16 | data: resolvedFile ? `@import ${resolvedFile};` : undefined 17 | } 18 | ] 19 | 20 | const { postcss, extract, ...vuetifyLoaderOptions } = option 21 | 22 | return { 23 | vuetifyLoaderOptions, 24 | sassArray, 25 | extract, 26 | postcss 27 | } 28 | } 29 | 30 | module.exports = resolveOptions 31 | -------------------------------------------------------------------------------- /src/resolveParameter.js: -------------------------------------------------------------------------------- 1 | function resolveParams(params) { 2 | const firstTwo = params.slice(0, 2) 3 | 4 | let file = null 5 | let option = {} 6 | 7 | for (const i of firstTwo) { 8 | if (typeof i === 'string') file = i 9 | 10 | if (typeof i === 'object') option = i 11 | } 12 | 13 | return { 14 | file, 15 | option 16 | } 17 | } 18 | 19 | module.exports = resolveParams 20 | -------------------------------------------------------------------------------- /tests/resolve-file.test.js: -------------------------------------------------------------------------------- 1 | const resolveFile = require('../src/resolveFile') 2 | const getPath = require('../src/getPath') 3 | 4 | describe('check file exist', () => { 5 | test('should exist', () => { 6 | expect(resolveFile('index.js')).toBe(getPath('index.js')) 7 | }) 8 | test('should not exist', () => { 9 | expect(resolveFile('foo.js')).toBe(null) 10 | }) 11 | }) 12 | -------------------------------------------------------------------------------- /tests/resolve-parameter.test.js: -------------------------------------------------------------------------------- 1 | const rp = require('../src/resolveParameter') 2 | 3 | describe('type check', () => { 4 | test('should be type object', () => { 5 | expect(typeof rp([])).toBe('object') 6 | }) 7 | test('should be type object', () => { 8 | expect(typeof rp([1])).toBe('object') 9 | }) 10 | }) 11 | 12 | describe('has object option check', () => { 13 | test('should return same object for optionObject', () => { 14 | const pa = rp([{}]) 15 | expect(pa.option).toEqual({}) 16 | }) 17 | }) 18 | 19 | describe('has file string check', () => { 20 | test('should return path for fileString', () => { 21 | const pa = rp(['src/sass/variable.scss']) 22 | expect(pa.file).toBe('src/sass/variable.scss') 23 | }) 24 | }) 25 | 26 | describe('pass two params check order one', () => { 27 | const pa = rp(['src/sass/variable.scss', { foo: 'bar' }]) 28 | test('should return same file', () => { 29 | expect(pa.file).toBe('src/sass/variable.scss') 30 | }) 31 | test('should return same object', () => { 32 | expect(pa.option).toEqual({ foo: 'bar' }) 33 | }) 34 | }) 35 | 36 | describe('pass two params check order two', () => { 37 | const pa = rp([{ foo: 'bar' }, 'src/sass/variable.scss']) 38 | test('should return same file', () => { 39 | expect(pa.file).toBe('src/sass/variable.scss') 40 | }) 41 | test('should return same object', () => { 42 | expect(pa.option).toEqual({ foo: 'bar' }) 43 | }) 44 | }) 45 | --------------------------------------------------------------------------------