{"id":20501100,"url":"https://github.com/hosein2398/gue","last_synced_at":"2025-04-13T19:13:49.392Z","repository":{"id":35346765,"uuid":"217286631","full_name":"hosein2398/gue","owner":"hosein2398","description":"Vue component generator","archived":false,"fork":false,"pushed_at":"2022-12-10T06:39:38.000Z","size":460,"stargazers_count":31,"open_issues_count":12,"forks_count":12,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T09:52:15.731Z","etag":null,"topics":["cli","component","generator","vue","vue-cli"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/hosein2398.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":"2019-10-24T11:50:47.000Z","updated_at":"2023-03-04T06:02:17.000Z","dependencies_parsed_at":"2023-01-15T18:56:03.782Z","dependency_job_id":null,"html_url":"https://github.com/hosein2398/gue","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hosein2398%2Fgue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hosein2398%2Fgue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hosein2398%2Fgue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hosein2398%2Fgue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hosein2398","download_url":"https://codeload.github.com/hosein2398/gue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248766749,"owners_count":21158301,"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":["cli","component","generator","vue","vue-cli"],"created_at":"2024-11-15T18:24:05.770Z","updated_at":"2025-04-13T19:13:49.372Z","avatar_url":"https://github.com/hosein2398.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Gue   [![Build Status](https://travis-ci.org/hosein2398/gue.svg?branch=master)](https://travis-ci.org/hosein2398/gue) [![Coverage Status](https://coveralls.io/repos/github/hosein2398/gue/badge.svg?branch=master\u0026kill_cache=1)](https://coveralls.io/github/hosein2398/gue?branch=master)\n\n\n\n\u003e Vue js component generator\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"430\" src=\"./logo.png\"\u003e\n\u003c/p\u003e\n\n## Demo\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./preview.gif\"\u003e\n\u003c/p\u003e\n\n\nFeatures\n* 📜 Generate Vue component\n* 🧰 Generate test file for the component \n* ⚙️ Dynamic path for component\n* 📁 Configurable root directory for components and tests\n* 📝 Custom templates for components and test\n## Installing\n\u003e Note that this package is published under name of `vue-gue`\n```\nnpm i -g vue-gue\n```\n\n## Getting started\nHead over to root of your project in terminal, say you want to create a component named `footer`:\n```\ngue footer\n```\nThis will generate `footer` component in `./src/components/footer.vue`\n#### Change directory of component\nYou can define a directory which you want your component to be generated in.\n```\ngue tab ./menu\n```\nThis will generate `tab` component in `./menu/tab.vue`\n\u003e Consider behavior of directory parameter when you have a config file and you don't. [details](#usage)  \n\u003e For a consistent way to change root directory of components see  [config](#config-file).\n\n#### Generate test file\nNow if you want a component and also it's corresponding unit test file you can do:\n```\ngue footer -u\n```\nThis will generate `footer` component in `./src/components/footer.vue` and also a test file in `./tests/unit/footer.js`\n\u003e To change any of these directories see [config](#config-file)\n## Usage\nGeneral usage is like:\n```\n$ gue --help\n\n  Usage: gue \u003ccomponentName\u003e [direcroty] [options]\n\n  Options:\n    -u, --unit             create unit test of the component too\n    -t, --template \u003cname\u003e  define which template to use\n    -h, --help             output usage information\n\n```\n* \u0026lt;componentName\u0026gt; is mandatory.\n* [directory] is optional, and is a relative path.\n  If you have a config file this will be a `subdirectory` of your [componentRoot](#options)\n  If you don't, then this will lead to generation of component in exact `direcroty` \n* [options] are optional, available options are `-u` which will generate test file, and `-t` which is used to define which template for components to use.\n\n## Config file\nGue accepts a config file to change default settings. In root directory of project make a file `gue.json`, and Gue will automatically recognize and use it.\n#### Options\nHere are available options for config file:\n* `componentRoot`: root directory which components will be generated in. should be relative path.\n* `componentSource`: path to custom component template. Or an object to define [multiple templates](#using-multiple-custom-templates).\n* `unitRoot`:  directory which test  will be generated in. should be a relative path.\n* `unitSource`: path to custom test file template.\n\nAn example of a config file with all options:\n```json\n{\n  \"componentRoot\":\"./front-end/src/components\",\n  \"unitRoot\":\"./front-end/test\",\n  \"componentSource\":\"./myTemplates/myVueTemplate.vue\",\n  \"unitSource\":\"./myTemplates/myTestTemplate.js\"\n}\n```\nNow if you run gue to create a `clock` component in your project, it'll generate it in `./front-end/src/components/clock.vue`. \nIf you run following command in the same project:\n```\ngue title ./header\n```\nWill generate `./front-end/src/components/header/title.vue`\n\n#### Custom templates\nAs said you can use custom templates in Gue, define path to them with `componentSource` and `unitSource` so that Gue will use them instead of it's default ones.\n##### Variables\nIn your component template you can use variable `\u003c%NAME%\u003e` and Gue will replace it with name of component when generating.\nAnd also in test template you use `\u003c%NAME%\u003e` and `\u003c%PATH%\u003e` which will be replaced with path where component is located, relative to path of test file.\nHere is an example of custom component template:\n```\n\u003ctemplate\u003e\n  \u003cdiv class=\"app\"\u003e\n    Hey I'm a component generated with Gue, my name is \u003c%NAME%\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\nexport default {\nname: \"\u003c%NAME%\u003e\",\ndata() {\n  return {\n    someData: \"a sample\"\n  }\n}\n\u003cstyle scoped\u003e\n\u003c/style\u003e\n```\nTo see other examples look at [templates folder](https://github.com/hosein2398/gue/tree/master/src/templates).\n##### Using multiple custom templates\nYou can use multiple custom templates. So `componentSource` can be object (multiple templates) or a string (single template). Multiple templates can be created like:\n```json\n{\n  \"componentSource\": {\n    \"component\"  :  \"./tmps/component.vue\",\n    \"page\"  :  \"./tmps/page.vue\"\n  }\n}\n```\nAnd when using Gue you have to tell it which component template to use:\n```\ngue menu -t component\ngue setting ./pages -t page\n```\nYou can define one of your templates as `default` one, so that you don't have to type `-t` every time. Default component can be specified with `:default` postfix:\n```json\n{\n  \"componentSource\": {\n    \"component:default\"  :  \"./tmps/component.vue\",\n    \"page\"  :  \"./tmps/page.vue\"\n  }\n}\n```\nNow if you type any command without `-t`, component template will be used.\n```\ngue foo \n```\nWill use `component` template to generate foo component. No need of `-t component`","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhosein2398%2Fgue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhosein2398%2Fgue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhosein2398%2Fgue/lists"}