# @gregor-dzierzon/vue-add

> Create VUE components and services from the CLI.

Latest version **1.0.2** (published 2022-05-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install @gregor-dzierzon/vue-add
pnpm add @gregor-dzierzon/vue-add
yarn add @gregor-dzierzon/vue-add
bun add @gregor-dzierzon/vue-add
```

Provides the command `vue-add`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-05-24 |
| First published | 2022-05-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Gregor Dzierzon |
| Maintainers | gregor-dzierzon |
| Keywords | cli, vue-add |

## Links

- npm: https://www.npmjs.com/package/@gregor-dzierzon/vue-add
- npm.io page: https://npm.io/package/@gregor-dzierzon/vue-add

## Dependencies (2)

- [arg](https://npm.io/package/arg.md) ^5.0.1
- [esm](https://npm.io/package/esm.md) ^3.2.25

## Alternatives

- [@salesforce/cli](https://npm.io/package/@salesforce/cli.md) — 389.7K weekly downloads
- [@mintlify/cli](https://npm.io/package/@mintlify/cli.md) — 208.9K weekly downloads
- [@grafana/e2e-selectors](https://npm.io/package/@grafana/e2e-selectors.md) — 128.7K weekly downloads
- [mintlify](https://npm.io/package/mintlify.md) — 112.0K weekly downloads
- [@intlayer/cli](https://npm.io/package/@intlayer/cli.md) — 22.8K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2022-05-24
- 1.0.1 — 2022-05-24
- 1.0.0 — 2022-05-24

## README

# vue-add CLI helper

```
npm install -g @gregor-dzierzon/vue-add
```

## File Structure

The VUE components and views created by this CLI helper use an opinionated folder structure which separates the HTML, JavaScript and CSS into their own files as follows.

``` text
src/components/component-name/component-name.css
src/components/component-name/component-name.js
src/components/component-name/ComponentName.vue
```

This approach resembles the separation of concerns approach taken by Angular, but in this case the .vue file is what links the files together.

### Example

By executing the following command the cli will create the following commands in your VUE project.

``` bash
vue-add ProductList -c
```

ProductList.vue

``` html
<script src="./product-list.js"></script>
<style src="./product-list.css" scoped></style>

<template>
    <div id="product-list">
    
    </div>
</template>
```

product-list.js

``` javascript
export default {
  name: "product-list",
  components: {},
  data() {
      return {}
  },
  created() {},
  computed: {},
  methods: {}
}
```

product-list.css

``` css
/* 
  empty file
*/
```

## Create Components

Creating components adds the component to the ```src/components``` directory

``` bash
# -c, --component
vue-add ProductList -c
vue-add ProductList --component

# no identifier defaults to a component
vue-add ProductList

# you can create sub directories
vue-add products/ProductList -c
```

## Create Views

View files structures follow the same pattern as the component structure. The only difference is that they are placed in the ```src/views``` directory.

``` bash
# -v, --view
vue-add ProductPage -v
vue-add ProductPage --view

# you can create sub directories
vue-add products/ProductPage -v
```

## Create Services

Creating a service only creates a single service file in the ```src/services``` directory.

``` bash
# -s, --service
vue-add AuthenticationService -s
vue-add AuthenticationSerivce --service

# you can create sub directories
vue-add security/AuthenticationService -s
```

The following ```src/services/authentication-service.js``` file is created.

``` javascript
import axios from "axios"

class AuthenticationService
{
    get(id)
    {
        return axios.get(`/${id}`)
    }
}

export default new AuthenticationService()

```

---
_Source: https://npm.io/package/@gregor-dzierzon/vue-add · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._