{"id":20631837,"url":"https://github.com/andrelmlins/vue-grid-responsive","last_synced_at":"2025-04-15T18:53:45.198Z","repository":{"id":42670727,"uuid":"268352663","full_name":"andrelmlins/vue-grid-responsive","owner":"andrelmlins","description":"Responsive grid system based on Bootstrap for Vue","archived":false,"fork":false,"pushed_at":"2022-12-11T08:15:42.000Z","size":377,"stargazers_count":29,"open_issues_count":4,"forks_count":10,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-03T20:38:28.644Z","etag":null,"topics":["bootstrap","grid","responsive","vue"],"latest_commit_sha":null,"homepage":"https://vue-grid-responsive.netlify.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andrelmlins.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-31T19:49:54.000Z","updated_at":"2024-06-25T23:31:18.000Z","dependencies_parsed_at":"2023-01-26T19:00:27.650Z","dependency_job_id":null,"html_url":"https://github.com/andrelmlins/vue-grid-responsive","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrelmlins%2Fvue-grid-responsive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrelmlins%2Fvue-grid-responsive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrelmlins%2Fvue-grid-responsive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrelmlins%2Fvue-grid-responsive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrelmlins","download_url":"https://codeload.github.com/andrelmlins/vue-grid-responsive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248914116,"owners_count":21182359,"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":["bootstrap","grid","responsive","vue"],"created_at":"2024-11-16T14:13:40.227Z","updated_at":"2025-04-15T18:53:45.178Z","avatar_url":"https://github.com/andrelmlins.png","language":"Vue","funding_links":[],"categories":["UI Components [🔝](#readme)","Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg alt=\"Vue Framework\" src=\"https://vuejs.org/images/logo.png\" width=\"100\"\u003e\n\n\u003ch1\u003eVue Grid Responsive\u003c/h1\u003e\n\nResponsive grid system based on Bootstrap for Vue.\n\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n[![npm version](https://badge.fury.io/js/vue-grid-responsive.svg)](https://www.npmjs.com/package/vue-grid-responsive) \u0026bull; [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/andrelmlins/vue-grid-responsive/blob/master/LICENSE) \u0026bull; [![Build Status](https://travis-ci.com/andrelmlins/vue-grid-responsive.svg?branch=master)](https://travis-ci.com/andrelmlins/vue-grid-responsive)\n\n## Installation\n\n### NPM\n\n**vue 2.0**\n\n```\nnpm i vue-grid-responsive\n// OR\nyarn add vue-grid-responsive\n```\n\n**vue 3.0**\n\n```\nnpm i vue-grid-responsive@next\n// OR\nyarn add vue-grid-responsive@next\n```\n\n### CDN\n\n**vue 2.0**\n\n```html\n\u003cscript src=\"https://unpkg.com/vue-grid-responsive\"\u003e\u003c/script\u003e\n```\n\n**vue 3.0**\n\n```html\n\u003cscript src=\"https://unpkg.com/vue-grid-responsive@next\"\u003e\u003c/script\u003e\n```\n\n### Manual\n\nYou can also download and import it manually\n\n```html\n\u003cscript src=\"/vue-grid-responsive/dist/vue-grid-reponsive.min.js\"\u003e\u003c/script\u003e\n```\n\n## Module import\n\n**vue 2.0**\n\n```js\nimport Vue from 'vue';\nimport { Row, Column, Hidden } from 'vue-grid-responsive';\n\nVue.component('row', Row);\nVue.component('column', Column);\nVue.component('hidden', Hidden);\n```\n\n**vue 3.0**\n\n```js\nimport { createApp } from 'vue';\nimport { Row, Column, Hidden } from 'vue-grid-responsive';\n\nconst app = createApp(App);\n\napp.component('row', Row);\napp.component('column', Column);\napp.component('hidden', Hidden);\n```\n\n## Examples\n\nAn example of how to use the library:\n\n```vue\n\u003ctemplate\u003e\n  \u003crow container :gutter=\"12\"\u003e\n    \u003ccolumn :xs=\"12\" :md=\"4\" :lg=\"3\"\u003e xs=12 md=4 lg=3 \u003c/column\u003e\n    \u003ccolumn :xs=\"12\" :md=\"4\" :lg=\"3\"\u003e xs=12 md=4 lg=3 \u003c/column\u003e\n    \u003ccolumn :xs=\"12\" :md=\"4\" :lg=\"3\"\u003e xs=12 md=4 lg=3 \u003c/column\u003e\n    \u003ccolumn :xs=\"12\" :md=\"4\" :lg=\"3\"\u003e xs=12 md=4 lg=3 \u003c/column\u003e\n  \u003c/row\u003e\n\u003c/template\u003e\n```\n\nAn example how to use offset in addition with a columns:\n\n```vue\n\u003ctemplate\u003e\n  \u003crow container :gutter=\"12\"\u003e\n    \u003ccolumn :md=\"8\" :mdOffset=\"2\" :lg=\"6\" :lgOffset=\"3\"\u003e \u003c/column\u003e\n  \u003c/row\u003e\n\u003c/template\u003e\n```\n\nUsing the hidden component:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003chidden :xs=\"true\"\u003e hidden xs \u003c/hidden\u003e\n    \u003chidden :md=\"true\"\u003e hidden md \u003c/hidden\u003e\n    \u003chidden :xl=\"true\"\u003e hidden xl \u003c/hidden\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Demo [Link](https://vue-grid-responsive.netlify.com/)\n\nLocal demo:\n\n```\ngit clone https://github.com/andrelmlins/vue-grid-responsive.git\ncd vue-grid-responsive\nnpm \u0026\u0026 npm run dev\n```\n\n## Properties\n\nComponent props:\n\n### Row Component props\n\n| Prop    | Default | Type   | Description                            |\n| ------- | ------- | ------ | -------------------------------------- |\n| gutter  | -       | number | Grid spacing in the container          |\n| columns | 12      | number | Setting columns count in the container |\n\n### Column Component props\n\n#### Basic Size\n\n| Prop  | Default | Type   | Description                |\n| ----- | ------- | ------ | -------------------------- |\n| xs    | -       | number | Size in extra small screen |\n| sm    | -       | number | Size in small screen       |\n| md    | -       | number | Size in medium screen      |\n| lg    | -       | number | Size in large screen       |\n| xl    | -       | number | Size in extra large screen |\n| order | -       | number | Order the columns          |\n\n#### Offset\n\n| Prop     | Default | Type   | Description                  |\n| -------- | ------- | ------ | ---------------------------- |\n| xsOffset | -       | number | Offset in extra small screen |\n| smOffset | -       | number | Offset in small screen       |\n| mdOffset | -       | number | Offset in medium screen      |\n| lgOffset | -       | number | Offset in large screen       |\n| xlOffset | -       | number | Offset in extra large screen |\n\n### Hidden Component props\n\n| Prop | Default | Type    | Description                |\n| ---- | ------- | ------- | -------------------------- |\n| xs   | -       | boolean | Hidden in extra small size |\n| sm   | -       | boolean | Hidden in small size       |\n| md   | -       | boolean | Hidden in medium size      |\n| lg   | -       | boolean | Hidden in large size       |\n| xl   | -       | boolean | Hidden in extra large size |\n\n## NPM Statistics\n\nDownload stats for this NPM package\n\n[![NPM](https://nodei.co/npm/vue-grid-responsive.png)](https://nodei.co/npm/vue-grid-responsive/)\n\n## License\n\nVue Grid Responsive is open source software [licensed as MIT](https://github.com/andrelmlins/vue-grid-responsive/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrelmlins%2Fvue-grid-responsive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrelmlins%2Fvue-grid-responsive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrelmlins%2Fvue-grid-responsive/lists"}