# @nsoft/vue-cli-plugin-nsoft

> NSoft plugin for Vue CLI 3

Latest version **0.5.0** (published 2022-03-29) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @nsoft/vue-cli-plugin-nsoft
pnpm add @nsoft/vue-cli-plugin-nsoft
yarn add @nsoft/vue-cli-plugin-nsoft
bun add @nsoft/vue-cli-plugin-nsoft
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2022-03-29 |
| First published | 2018-12-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 27.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | team@nsoft.com |
| Maintainers | gamesjs, sbjs, scdjs, chmjs, nsoft-owner, manico_, nsoftsysdev |
| Keywords | nsoft, vue-cli, plugin |

## Links

- npm: https://www.npmjs.com/package/@nsoft/vue-cli-plugin-nsoft
- Repository: https://github.com/chmjs/vue-cli-plugin-nsoft
- Homepage: https://github.com/chmjs/vue-cli-plugin-nsoft/blob/master/README.md
- Issues: https://github.com/chmjs/vue-cli-plugin-nsoft/issues
- npm.io page: https://npm.io/package/@nsoft/vue-cli-plugin-nsoft

## Dependencies (1)

- [rimraf](https://npm.io/package/rimraf.md) ^3.0.2

## Recent versions

- 0.5.0 (latest) — 2022-03-29
- 0.4.2 — 2021-04-23
- 0.4.1 — 2021-03-09
- 0.4.0 — 2020-12-01
- 0.3.3 — 2020-05-27
- 0.3.2 — 2020-05-26
- 0.3.1 — 2019-11-18
- 0.3.0 — 2019-07-23
- 0.2.7 — 2019-05-13
- 0.2.6 — 2019-05-10
- 0.2.5 — 2019-01-22
- 0.2.4 — 2019-01-21
- 0.2.3 — 2019-01-12
- 0.2.2 — 2019-01-11
- 0.2.1 — 2019-01-07
- … 2 more at https://npm.io/package/@nsoft/vue-cli-plugin-nsoft/versions

## README

# vue-cli-plugin-nsoft
NSoft General Vue CLI Plugin

## :star: Features

- Vue CLI Plugin to generate a project structure for your project.

## Table of contents

- [Getting started](#getting-started)
- [Commands](#commands)
- [Source Structure](#source-structure)
- [Plugin options](#plugin-options)
- [Generated project structure](#generated-project-structure)
- [Testing](#testing)

---

## Getting started

If you haven't yet installed vue-cli 3, first follow the install instructions here: https://github.com/vuejs/vue-cli

Generate a project :

```
vue create my-app
```

To install nsoft plugin:

```
cd my-app
vue add @nsoft/nsoft
```

## Commands

- `npm run serve`: Run app in development mode.
- `npm run build`: Production ready build.
- `npm run lint`: Lint the files using ESLint.
- `npm run test:coverage`: Generate coverage with codecov.
- `npm run test:e2e`: End-to-end tests with [Nightwatch](http://nightwatchjs.org/).
- `npm run test:unit` Start the Jest Test Runner.
- `npm run test:unitUpdate`:
- `npm run test:unitWatch`: Watch changes and run unit test.

## Source Structure

**Folder structure:**

- `api/`: abstraction for  external communication
- `assets/`: module assets (processed by module bundler)
- `components/`: all components that are not main view in flat structure
- `directives/`: all directives in flat structure
- `filters/`: all filters in flat structure
- `mixins/`: all mixins in flat structure
- `plugins/`: for plugins inclusion
- `utility/`: helper functions in flat structure
- `pages/`: component pages
- `layouts/`: component template pages
- `store/`: store stuff
- `router/`:  routing stuff
- `main.js`:  app entry file
- `App.vue`:  main app component

**Router structure:**
- `index.js`: app routes
- `{pageRouter}.js`:  nested routes can be defined in separated file with appropriate name
- `navigatonGuards.js`:  definition of global guards

**Store structure:**
- `state.js`:  state tree
- `getters.js`:  all getters
- `mutations.js`:  all mutations
- `mutationTypes.js`:  keep all mutation types here
- `actions.js`:  all actions
- `plugins/`:  plugins in flat structure
- `modules/`:  keep modules with appropriate named folders with same structure of files
- `index.js`:  where we assemble modules and export the store

**Note:** `public/` is outside of `src/` folder, keep static assets that are directly copied there

**Component styleguide:** Follow vue official [styleguide](https://vuejs.org/v2/style-guide/#Priority-B-Rules-Strongly-Recommended-Improving-Readability)


## Plugin options

* `Project name` - name of your repository, written to `package.json`
* `Project description` - description of your repository, written to `package.json`
* `Author` - author of your repository, written to `package.json`

### Additional plugins

#### Seven Gravity Gateway

In case Seven Gravity Gateway is accepted on project creation:
* `@nsoft/seven-gravity-gateway` is added as NPM dependecy 
* two utilities are created under `src/plugins/seven-gravity-gateway` which are promise based wrappers around `master/slave` instances 

##### Example 
```javascript
// Using slave
import GatewaySlave from '@/plugins/seven-gravity-gateway/slave';
const config = {
  slaveId: 'test',
  data: {
    dummyProp: 'dummyProp',
  },
  debug: true,
};
GatewaySlave.init(config).then(function() {
  // emit when slave is ready for interaction/futher message exchange
  GatewaySlave.api.emit({
    action: 'Slave.Loaded',
    data: {
      someData: 'data'
    }
  })
});

// using master
import GatewayMaster from '@/plugins/seven-gravity-gateway/master';
GatewayMaster.init({
  debug: false
});
GatewayMaster.addSlave({
  frameId: 'DummyFrame',
  slaveId: 'SlaveId',
}).then((message) => {
  // slave finished with loading and ready for interaction
});
```

## Generated project structure

``` bash
.
├── 📂 config
│   └── .env.js
├── 📂 public
│   ├── favicon.ico
│   └── index.html
└── 📂 src
│   ├── 📂 api
│   │   ├── 📂 interceptors
│   │   ├── http.js
│   │   └── index.js
│   ├── 📂 assets
│   ├── 📂 components
│   │   ├── SampleBox.vue
│   │   ├── SampleBox.spec.js
│   │   └── index.js
│   ├── 📂 directives
│   │   └── index.js
│   ├── 📂 filters
│   │   └── index.js
│   ├── 📂 layouts
│   │   └── TemplateDefault.vue
│   ├── 📂 mixins
│   │   └── index.js
│   ├── 📂 pages
│   │   ├── Home.vue
│   ├── 📂 plugins
│   │   ├── index.js
│   ├── 📂 router
│   │   ├── index.js
│   │   └── navigationGuards.js
│   ├── 📂 store
│   │   ├── 📂 modules
│   │   ├── 📂 plugins
│   │   ├── actions.js
│   │   ├── getters.js
│   │   ├── index.js
│   │   ├── mutationTypes.js
│   │   ├── mutations.js
│   │   ├── state.js
│   │   └── storeConfig.js
│   ├── 📂 utility
│   │   └── index.js
│   ├── App.vue
│   ├── main.js
├── 📂 tests
│   ├── 📂 e2e
│   └── 📂 unit
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── CHANGELOG.md
├── README.md
├── babel.config.js
├── jest.config.js
├── package.json
├── postcss.config.js
└── vue.config.js

```

## Testing

 - test files should be located next to file (xy.js and xy.spec.js)

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