{"id":13750153,"url":"https://github.com/vouill/vue-bulma-components","last_synced_at":"2025-05-09T15:31:39.683Z","repository":{"id":57394836,"uuid":"96706604","full_name":"vouill/vue-bulma-components","owner":"vouill","description":"Translate Bulma css api to vue components","archived":false,"fork":false,"pushed_at":"2019-05-10T14:22:55.000Z","size":496,"stargazers_count":159,"open_issues_count":0,"forks_count":19,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-10T13:53:23.899Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vouill.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-09T19:32:17.000Z","updated_at":"2025-01-03T13:14:59.000Z","dependencies_parsed_at":"2022-09-06T02:51:58.599Z","dependency_job_id":null,"html_url":"https://github.com/vouill/vue-bulma-components","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vouill%2Fvue-bulma-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vouill%2Fvue-bulma-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vouill%2Fvue-bulma-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vouill%2Fvue-bulma-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vouill","download_url":"https://codeload.github.com/vouill/vue-bulma-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253275608,"owners_count":21882336,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T08:00:22.667Z","updated_at":"2025-05-09T15:31:39.206Z","avatar_url":"https://github.com/vouill.png","language":"JavaScript","funding_links":[],"categories":["VueJS","构架","Components \u0026 Libraries","Frameworks","UI Components","Frameworks [🔝](#readme)","UI Libraries \u0026 Components"],"sub_categories":["Related community list","响应","Frameworks","Responsive","Vue","Courses"],"readme":"# vue-bulma-components\n[![Build Status](https://travis-ci.org/vouill/vue-bulma-components.svg?branch=feature%2Funit-tests)](https://travis-ci.org/vouill/vue-bulma-components)\n\nThe goal of this library is to use the bulma class syntax as components and props.\n\n**3kb minified**\n\n[Demo](https://teller-multisystems-48055.netlify.com) and [try the live demo](https://codesandbox.io/s/wk2w3z0zk5) too :)\n\n\n## Usage\nExemple with grid system\n\nOriginal Bulma way:\n\n``` html\n\u003cdiv class=\"columns is-mobile\"\u003e\n  \u003cdiv class=\"column is-half is-offset-one-quarter\"\u003e\n    A column\n   \u003c/div\u003e\n\u003c/div\u003e\n```\n\nVue-bulma-component way:\n```html\n\u003cb-columns is-mobile\u003e\n  \u003cb-column is-half is-offset-one-quarter\u003e\n    A column\n  \u003c/b-column\u003e\n\u003c/b-columns\u003e\n```\n\n### Using css class as directives at your advantage\n\nOne cool feature of using the Bulma css api as directives is toggling them. See how the `is-loading` class is handled\n\nEx:\n\n``` html\n\u003cbutton class=\"button is-dark\" :class=\"{ 'is-loading': bool }\"\u003e\n  Send\n\u003c/button\u003e\n```\n\nVue-bulma-component way:\n``` html\n\u003cb-button is-dark :is-loading=\"bool\"\u003e\n  Send\n\u003c/b-button\u003e\n```\n\nMuch nicer right ? ;)\n\n\n**Note:**\n\nYou can also use the Pascal case notation, example:\n\n``` html\n\u003cBButton is-dark :is-loading=\"bool\"\u003e\n  Send\n\u003c/BButton\u003e\n```\n\n### Using custom classes\n\nIf you want to add any other class simply use the normal class attribute\n\n``` html\n\u003cb-button is-dark :class=\"my-custom-class\"\u003e\n  Send\n\u003c/b-button\u003e\n```\n\n## Install\n\n```shell\nyarn add vue-bulma-components\n\nor\n\nnpm install --save vue-bulma-components\n```\n\nThen install [Bulma](http://bulma.io/documentation/overview/start/) however you want :).\n\n\n### Use all components globally in your app\nInside your main.js\n\n```javascript\nimport vueBulmaComponents from 'vue-bulma-components'\nVue.use(vueBulmaComponents)\n```\n\nIt will make globallly available all [these](https://github.com/vouill/vue-bulma-components/blob/master/src/plugin/helpers.js#L22) bulma components with the prefix `b-` or `B` if you prefer the Pascal case component naming.\n\nYou can also change the default prefix of all the bulma components (to avoid collision with existing components in your project)\n\n ```javascript\n import vueBulmaComponents from 'vue-bulma-components'\n Vue.use(vueBulmaComponents, {prefix: 'y-'})\n ```\n\n Instead of using `\u003cb-columns/\u003e` you need to use `\u003cy-columns/\u003e`\n### Use specific bulma components in your components\n\n``` html\n\u003ctemplate\u003e\n  \u003cb-box/\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import { bulmaComponentGenerator } from 'vue-bulma-components'\n\n  export default {\n    components: {\n        box: bulmaComponentGenerator('box')\n    }\n  }\n\u003c/script\u003e\n```\n\nYes, you can actually create any vue-bulma-component by calling `bulmaComponentGenerator(bulmaComponentStr)`.\n\n## Components\n\nBy default, most of the components are rendered as `\u003cdiv\u003e`. You can also use the prop `outerElement=\"span\"` to change this behavior.\n\nIf you want to globally apply default outer element for some bulma component, you can use `outerElement` option on **`Vue.use()`**.\n\n```javascript\nimport vueBulmaComponents from 'vue-bulma-components'\nVue.use(vueBulmaComponents, {\n  outerElement: {\n    'navbar': 'nav',\n    'navbar-item': 'a'\n  }\n})\n```\n\n**If you use the `Vue.use()` method to use the vue-bulma-components.**\n\nMost of the components are named after the bulma class they belong to.\nEx: `\u003cbox/\u003e \u003ccard/\u003e \u003cpanel/\u003e ...`\n\nHowever, some bulma components are also named after native html element. This is why [they are prefixed](https://github.com/vouill/vue-bulma-components/blob/master/src/plugin/helpers.js#L24).\n\nEx :\n- Bulma : `input`\n- vue-component-bulma: `\u003cb-input\u003e`. This prefix is used to avoid collision with native html `\u003cinput\u003e` element.\n\n**If you generate bulma components**\n\n``` html\n\u003cscript\u003e\n  import { bulmaComponentGenerator } from 'vue-bulma-components'\n\n  export default {\n    components: {\n        box: bulmaComponentGenerator('box', 'span')\n    }\n  }\n\u003c/script\u003e\n```\n\nUsage:\n`bulmaComponentGenerator(bulma_coponent_name,rendered_outer_html_element )`.\n\nNote: `rendered_outer_html_element` is optional.\n\n\n## Known limitations:\n\nCurrently you cannot use v-model with `\u003cb-input\u003e` as expected. Because `vue-bulma-components` use functional components.\n\nDon't worry, you can still bind a value to a `\u003cb-input\u003e` component using `@input` event (it's what v-model does under the hood):\n\n```html\n\u003ctemplate\u003e\n  \u003cb-control\u003e\n    \u003cb-input :value=\"foo\" @input=\"handleInputChange\"/\u003e\n    {{foo}}\n  \u003c/b-control\u003e\n\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    data: () =\u003e ({\n      foo: ''\n    }),\n    method: {\n      handleInputChange (e) {\n        this.foo = e.target.value\n      }\n    }\n  }\n\u003c/script\u003e\n\n```\n\nNote:\nIf you come from the version `1.x.x`, there is a breaking change.\n\nFrom `2.x.x` when using `Vue.use(vueBulmaComponents)`, default available components are prefixed by `\u003cb-[bulmacomponent]/\u003e` instead of `\u003c[bulmacomponent]/\u003e`\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvouill%2Fvue-bulma-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvouill%2Fvue-bulma-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvouill%2Fvue-bulma-components/lists"}