├── .babelrc
├── .circleci
└── config.yml
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .github
├── CONTRIBUTING.md
├── ISSUE_TEMPLATE.md
└── PULL_REQUEST_TEMPLATE.md
├── .gitignore
├── .npmignore
├── .release-it.json
├── CHANGELOG.md
├── LICENSE
├── README.md
├── generator
├── index.js
└── templates
│ ├── basic
│ ├── App.vue
│ └── main.js
│ └── style
│ └── src
│ └── assets
│ └── scss
│ ├── __variables.scss
│ └── app.scss
├── index.js
├── logo.png
├── package.json
├── prompts.js
├── test
├── buefyGenerator.spec.js
├── stubs
│ └── entry.vue
└── utils
│ └── generateWithPlugin.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["env"]
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
1 |
2 | version: 2
3 | jobs:
4 | build:
5 | working_directory: /usr/src/app
6 | docker:
7 | - image: banian/node
8 | steps:
9 | # Checkout repository
10 | - checkout
11 |
12 | # Restore cache
13 | - restore_cache:
14 | key: yarn-{{ checksum "yarn.lock" }}
15 |
16 | # Install dependencies
17 | - run:
18 | name: Install Dependencies
19 | command: NODE_ENV=dev yarn
20 |
21 | # Keep cache
22 | - save_cache:
23 | key: yarn-{{ checksum "yarn.lock" }}
24 | paths:
25 | - "node_modules"
26 |
27 | # Test
28 | - run:
29 | name: Tests
30 | command: yarn test
31 |
32 | # Coverage
33 | - run:
34 | name: Coverage
35 | command: yarn codecov
--------------------------------------------------------------------------------
/.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 = true
10 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | generator/templates
3 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: {
3 | jest: true
4 | },
5 | extends: [
6 | 'buefy'
7 | ],
8 | plugins: [
9 | 'jest'
10 | ],
11 | globals: {
12 | 'jest/globals': true,
13 | },
14 | rules: {
15 | "indent": ["error", 2, { "MemberExpression": "off" }],
16 | "vue-libs/no-async-functions": 0
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buefy/vue-cli-plugin-buefy/2aa8b1eca770b1ac52ef0118ae4b165a2ed94dc4/.github/CONTRIBUTING.md
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buefy/vue-cli-plugin-buefy/2aa8b1eca770b1ac52ef0118ae4b165a2ed94dc4/.github/ISSUE_TEMPLATE.md
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buefy/vue-cli-plugin-buefy/2aa8b1eca770b1ac52ef0118ae4b165a2ed94dc4/.github/PULL_REQUEST_TEMPLATE.md
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | *.log
4 | *.swp
5 | *~
6 | coverage
7 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .*
2 | *.log
3 | *.swp
4 |
--------------------------------------------------------------------------------
/.release-it.json:
--------------------------------------------------------------------------------
1 | {
2 | "src": {
3 | "tagName": "v%s",
4 | "commitMessage": "🔖 %s"
5 | },
6 | "github": {
7 | "release": true,
8 | "releaseName": "🚀 Release %s",
9 | "tokenRef": "GITHUB_TOKEN"
10 | },
11 | "npm": {
12 | "publish": true
13 | },
14 | "changelogCommand": "git log --pretty=format:'* %s (%h)' [REV_RANGE]"
15 | }
--------------------------------------------------------------------------------
/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 |
6 | ## [0.2.1](https://github.com/buefy/vue-cli-plugin-buefy/compare/v0.1.2...v0.2.1) (2018-04-20)
7 |
8 |
9 |
10 |
11 | ## [0.1.2](https://github.com/buefy/vue-cli-plugin-buefy/compare/v0.1.1...v0.1.2) (2018-03-14)
12 |
13 |
14 |
15 |
16 | ## [0.1.1](https://github.com/buefy/vue-cli-plugin-buefy/compare/v0.0.2...v0.1.1) (2018-03-14)
17 |
18 |
19 |
20 |
21 | ## 0.0.2 (2018-03-14)
22 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2018 kazuya kawaguchi
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | 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, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-cli-plugin-buefy
2 |
3 | [](https://npmjs.com/package/vue-cli-plugin-buefy)
4 | [](https://npmjs.com/package/vue-cli-plugin-buefy)
5 | [](https://circleci.com/gh/buefy/vue-cli-plugin-buefy)
6 | [](https://codecov.io/gh/buefy/vue-cli-plugin-buefy)
7 | [](https://david-dm.org/buefy/vue-cli-plugin-buefy)
8 | [](http://buefy.github.io)
9 |
10 |
11 | [Vue CLI 3.x](https://github.com/vuejs/vue-cli) plugin to add buefy to your Vue Project
12 |
13 | > Well, apparently you're an [adventurer](https://github.com/vuejs/vue-cli/blob/dev/README.md#status-beta). We are happy to see you here.
14 |
15 | ## Getting Started
16 | If you don't have a project created with Vue CLI 3.x:
17 |
18 | ```sh
19 | $ vue create my-vue-app
20 | ```
21 |
22 | Install the plugin into your project:
23 |
24 | ```sh
25 | $ cd my-vue-app
26 | $ vue add buefy
27 | ```
28 |
29 |
30 | ## Global sass resources
31 |
32 | You can do that using the css.loaderOptions option in `vue.config.js` to pass some shared global variables to all your Sass styles:
33 |
34 | ```js
35 | // vue.config.js
36 | const fs = require('fs')
37 |
38 | module.exports = {
39 | css: {
40 | loaderOptions: {
41 | sass: {
42 | data: fs.readFileSync('src/variables.scss', 'utf-8')
43 | }
44 | }
45 | }
46 | }
47 | ```
48 |
49 | ## Changelog
50 | Details of changes for each release are documented in the [CHANGELOG.md](https://github.com/buefy/vue-cli-plugin-buefy/blob/master/CHANGELOG.md).
51 |
52 |
53 | ## Issues
54 | Please make sure to read the [Issue Reporting Checklist](https://github.com/buefy/vue-cli-plugin-buefy/blob/master/.github/CONTRIBUTING.md#issue-reporting-guidelines) before opening an issue. Issues not conforming to the guidelines may be closed immediately.
55 |
56 |
57 | ## Contribution
58 | Please make sure to read the [Contributing Guide](https://github.com/buefy/vue-cli-plugin-buefy/blob/master/.github/CONTRIBUTING.md) before making a pull request.
59 |
60 |
61 | ## License
62 |
63 | [MIT](http://opensource.org/licenses/MIT)
64 |
--------------------------------------------------------------------------------
/generator/index.js:
--------------------------------------------------------------------------------
1 | module.exports = (api, options) => {
2 | // extend package
3 | api.extendPackage({
4 | dependencies: {
5 | 'buefy': '^0.9.0'
6 | }
7 | })
8 |
9 | let buefyLines = `\nimport Buefy from 'buefy'`
10 | if (options.addStyle === 'css') {
11 | buefyLines += `\nimport 'buefy/dist/buefy.css'`
12 | } else if (options.addStyle === 'scss') {
13 | api.extendPackage({
14 | devDependencies: {
15 | 'node-sass': '^4.9.0',
16 | 'sass-loader': '^7.0.1'
17 | }
18 | })
19 |
20 | api.render('./templates/style')
21 | buefyLines += `\nimport './assets/scss/app.scss'`
22 | }
23 |
24 | // use Buefy
25 | buefyLines += `\n\nVue.use(Buefy)`
26 |
27 | api.onCreateComplete(() => {
28 | // inject to main.js
29 | const fs = require('fs')
30 | const ext = api.hasPlugin('typescript') ? 'ts' : 'js'
31 | const mainPath = api.resolve(`./src/main.${ext}`)
32 |
33 | // get content
34 | let contentMain = fs.readFileSync(mainPath, { encoding: 'utf-8' })
35 | const lines = contentMain.split(/\r?\n/g).reverse()
36 |
37 | // inject import
38 | const lastImportIndex = lines.findIndex((line) => line.match(/^import/))
39 | lines[lastImportIndex] += buefyLines
40 |
41 | // modify app
42 | contentMain = lines.reverse().join('\n')
43 | fs.writeFileSync(mainPath, contentMain, { encoding: 'utf-8' })
44 |
45 | if (options.materialDesignIcons || options.fontAwesomeIcons) {
46 | const indexPath = api.resolve('./public/index.html')
47 | let contentIndex = fs.readFileSync(indexPath, { encoding: 'utf8' })
48 |
49 | const lines = contentIndex.split(/\r?\n/g).reverse()
50 | const lastLink = lines.findIndex((line) => line.match(/^\s*`
54 | }
55 | if (options.fontAwesomeIcons) {
56 | lines[lastLink] += `\n`
57 | }
58 |
59 | contentIndex = lines.reverse().join('\n')
60 | fs.writeFileSync(indexPath, contentIndex, { encoding: 'utf8' })
61 | }
62 | })
63 | }
64 |
--------------------------------------------------------------------------------
/generator/templates/basic/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Hello Buefy
4 |
5 |
6 |
7 |
12 |
13 |
--------------------------------------------------------------------------------
/generator/templates/basic/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App'
3 | import Buefy from 'buefy'
4 | import 'buefy/dist/buefy.css'
5 |
6 | Vue.use(Buefy)
7 |
8 | new Vue({
9 | render: h => h(App)
10 | }).$mount('#app')
11 |
--------------------------------------------------------------------------------
/generator/templates/style/src/assets/scss/__variables.scss:
--------------------------------------------------------------------------------
1 | // Included below are all the defined variables from Bulma
2 | // Modify as needed, removing the !default attribute.
3 |
4 | // Colors
5 |
6 | $black: hsl(0, 0%, 4%) !default;
7 | $black-bis: hsl(0, 0%, 7%) !default;
8 | $black-ter: hsl(0, 0%, 14%) !default;
9 |
10 | $grey-darker: hsl(0, 0%, 21%) !default;
11 | $grey-dark: hsl(0, 0%, 29%) !default;
12 | $grey: hsl(0, 0%, 48%) !default;
13 | $grey-light: hsl(0, 0%, 71%) !default;
14 | $grey-lighter: hsl(0, 0%, 86%) !default;
15 |
16 | $white-ter: hsl(0, 0%, 96%) !default;
17 | $white-bis: hsl(0, 0%, 98%) !default;
18 | $white: hsl(0, 0%, 100%) !default;
19 |
20 | $orange: hsl(14, 100%, 53%) !default;
21 | $yellow: hsl(48, 100%, 67%) !default;
22 | $green: hsl(141, 71%, 48%) !default;
23 | $turquoise: hsl(171, 100%, 41%) !default;
24 | $cyan: hsl(204, 86%, 53%) !default;
25 | $blue: hsl(217, 71%, 53%) !default;
26 | $purple: hsl(271, 100%, 71%) !default;
27 | $red: hsl(348, 100%, 61%) !default;
28 |
29 | // Typography
30 |
31 | $family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
32 | $family-monospace: monospace !default;
33 | $render-mode: optimizeLegibility !default;
34 |
35 | $size-1: 3rem !default;
36 | $size-2: 2.5rem !default;
37 | $size-3: 2rem !default;
38 | $size-4: 1.5rem !default;
39 | $size-5: 1.25rem !default;
40 | $size-6: 1rem !default;
41 | $size-7: 0.75rem !default;
42 |
43 | $weight-light: 300 !default;
44 | $weight-normal: 400 !default;
45 | $weight-medium: 500 !default;
46 | $weight-semibold: 600 !default;
47 | $weight-bold: 700 !default;
48 |
49 | // Responsiveness
50 |
51 | // The container horizontal gap, which acts as the offset for breakpoints
52 | $gap: 32px !default;
53 | // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
54 | $tablet: 769px !default;
55 | // 960px container + 4rem
56 | $desktop: 960px + (2 * $gap) !default;
57 | // 1152px container + 4rem
58 | $widescreen: 1152px + (2 * $gap) !default;
59 | // 1344px container + 4rem;
60 | $fullhd: 1344px + (2 * $gap) !default;
61 |
62 | // Miscellaneous
63 |
64 | $easing: ease-out !default;
65 | $radius-small: 2px !default;
66 | $radius: 3px !default;
67 | $radius-large: 5px !default;
68 | $radius-rounded: 290486px !default;
69 | $speed: 86ms !default;
70 |
71 | // Flags
72 |
73 | $variable-columns: true !default;
74 |
75 |
76 | // The default Bulma derived variables are declared below
77 |
78 | $primary: $turquoise !default;
79 |
80 | $info: $cyan !default;
81 | $success: $green !default;
82 | $warning: $yellow !default;
83 | $danger: $red !default;
84 |
85 | $light: $white-ter !default;
86 | $dark: $grey-darker !default;
87 |
88 | // Invert colors
89 |
90 | $orange-invert: findColorInvert($orange) !default;
91 | $yellow-invert: findColorInvert($yellow) !default;
92 | $green-invert: findColorInvert($green) !default;
93 | $turquoise-invert: findColorInvert($turquoise) !default;
94 | $cyan-invert: findColorInvert($cyan) !default;
95 | $blue-invert: findColorInvert($blue) !default;
96 | $purple-invert: findColorInvert($purple) !default;
97 | $red-invert: findColorInvert($red) !default;
98 |
99 | $primary-invert: $turquoise-invert !default;
100 | $info-invert: $cyan-invert !default;
101 | $success-invert: $green-invert !default;
102 | $warning-invert: $yellow-invert !default;
103 | $danger-invert: $red-invert !default;
104 | $light-invert: $dark !default;
105 | $dark-invert: $light !default;
106 |
107 | // General colors
108 |
109 | $background: $white-ter !default;
110 |
111 | $border: $grey-lighter !default;
112 | $border-hover: $grey-light !default;
113 |
114 | // Text colors
115 |
116 | $text: $grey-dark !default;
117 | $text-invert: findColorInvert($text) !default;
118 | $text-light: $grey !default;
119 | $text-strong: $grey-darker !default;
120 |
121 | // Code colors
122 |
123 | $code: $red !default;
124 | $code-background: $background !default;
125 |
126 | $pre: $text !default;
127 | $pre-background: $background !default;
128 |
129 | // Link colors
130 |
131 | $link: $blue !default;
132 | $link-invert: $blue-invert !default;
133 | $link-visited: $purple !default;
134 |
135 | $link-hover: $grey-darker !default;
136 | $link-hover-border: $grey-light !default;
137 |
138 | $link-focus: $grey-darker !default;
139 | $link-focus-border: $blue !default;
140 |
141 | $link-active: $grey-darker !default;
142 | $link-active-border: $grey-dark !default;
143 |
144 | // Typography
145 |
146 | $family-primary: $family-sans-serif !default;
147 | $family-code: $family-monospace !default;
148 |
149 | $size-small: $size-7 !default;
150 | $size-normal: $size-6 !default;
151 | $size-medium: $size-5 !default;
152 | $size-large: $size-4 !default;
153 |
--------------------------------------------------------------------------------
/generator/templates/style/src/assets/scss/app.scss:
--------------------------------------------------------------------------------
1 | @import "~bulma/sass/utilities/initial-variables";
2 | @import "~bulma/sass/utilities/functions";
3 | // 1. Set your own initial variables and derived
4 | // variables in _variables.scss
5 | @import "variables";
6 |
7 | // 2. Setup your Custom Colors
8 | $linkedin: #0077b5;
9 | $linkedin-invert: findColorInvert($linkedin);
10 | $twitter: #55acee;
11 | $twitter-invert: findColorInvert($twitter);
12 | $github: #333;
13 | $github-invert: findColorInvert($github);
14 |
15 | @import "~bulma/sass/utilities/derived-variables";
16 |
17 | // 3. Add new color variables to the color map.
18 | $addColors: (
19 | "twitter":($twitter, $twitter-invert),
20 | "linkedin": ($linkedin, $linkedin-invert),
21 | "github": ($github, $github-invert)
22 | );
23 | $colors: map-merge($colors, $addColors);
24 |
25 | @import "~bulma";
26 | @import "~buefy/src/scss/buefy";
27 |
28 | // 4. Provide custom buefy overrides and site styles here
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = (api, options) => {
2 | }
3 |
--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buefy/vue-cli-plugin-buefy/2aa8b1eca770b1ac52ef0118ae4b165a2ed94dc4/logo.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-cli-plugin-buefy",
3 | "description": "Vue CLI 3.x plugin to add vue-buefy to your Vue Project",
4 | "version": "0.3.8",
5 | "author": {
6 | "name": "anteriovieira",
7 | "email": "anteriovieira@gmail.com"
8 | },
9 | "bugs": {
10 | "url": "https://github.com/buefy/vue-cli-plugin-buefy/issues"
11 | },
12 | "devDependencies": {
13 | "@babel/core": "^7.0.0-beta.40",
14 | "@vue/cli": "^3.0.0-beta.6",
15 | "@vue/cli-test-utils": "^3.0.0-beta.6",
16 | "babel-preset-env": "^1.6.1",
17 | "codecov": "^3.0.0",
18 | "debug": "^3.1.0",
19 | "eslint": "^4.16.0",
20 | "eslint-config-buefy": "^0.0.2",
21 | "eslint-plugin-jest": "^21.14.1",
22 | "eslint-plugin-vue-libs": "^2.1.0",
23 | "jest": "^22.1.4",
24 | "standard-version": "^4.3.0"
25 | },
26 | "homepage": "https://github.com/buefy/vue-cli-plugin-buefy#readme",
27 | "main": "index.js",
28 | "keywords": [
29 | "vue",
30 | "vue-cli",
31 | "plugin",
32 | "buefy"
33 | ],
34 | "license": "MIT",
35 | "repository": {
36 | "type": "git",
37 | "url": "git+https://github.com/buefy/vue-cli-plugin-buefy.git"
38 | },
39 | "scripts": {
40 | "release": "standard-version && git push --follow-tags && npm publish",
41 | "lint": "eslint --ext .js generator",
42 | "test": "yarn run lint && jest"
43 | },
44 | "jest": {
45 | "testEnvironment": "node",
46 | "collectCoverage": true
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/prompts.js:
--------------------------------------------------------------------------------
1 | module.exports = [{
2 | name: `addStyle`,
3 | type: `list`,
4 | message: `Add Buefy style?`,
5 | choices: ['none', 'css', 'scss'],
6 | default: 0
7 | },
8 | {
9 | name: `materialDesignIcons`,
10 | type: `confirm`,
11 | message: 'Include Material Design Icons?',
12 | default: false
13 | },
14 | {
15 | name: `fontAwesomeIcons`,
16 | type: 'confirm',
17 | message: 'Include Font Awesome Icons?',
18 | default: false
19 | }]
20 |
--------------------------------------------------------------------------------
/test/buefyGenerator.spec.js:
--------------------------------------------------------------------------------
1 | const generateWithPlugin = require('./utils/generateWithPlugin')
2 |
3 | describe('buefy', () => {
4 | it('should have the buefy property in the package.json', async () => {
5 | const { pkg } = await generateWithPlugin({
6 | id: 'buefy',
7 | apply: require('../generator'),
8 | options: {}
9 | })
10 |
11 | expect(pkg.dependencies).toHaveProperty('buefy')
12 | })
13 |
14 | it('should have sass-loader and node-sass packages', async () => {
15 | const { pkg } = await generateWithPlugin({
16 | id: 'buefy',
17 | apply: require('../generator'),
18 | options: {
19 | addStyle: 'scss'
20 | }
21 | })
22 |
23 | expect(pkg.devDependencies).toHaveProperty('node-sass')
24 | expect(pkg.devDependencies).toHaveProperty('sass-loader')
25 | })
26 | })
27 |
--------------------------------------------------------------------------------
/test/stubs/entry.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ msg }}
3 |
4 |
5 |
10 |
11 |
--------------------------------------------------------------------------------
/test/utils/generateWithPlugin.js:
--------------------------------------------------------------------------------
1 | const Generator = require('@vue/cli/lib/Generator')
2 |
3 | module.exports = async function generateWithPlugin(plugin, pkg) {
4 | process.env.VUE_CLI_SKIP_WRITE = true
5 | const generator = new Generator('/', {
6 | plugins: [].concat(plugin)
7 | })
8 | await generator.generate()
9 | return {
10 | pkg: generator.pkg,
11 | files: generator.files
12 | }
13 | }
14 |
--------------------------------------------------------------------------------