# sm-vue

> This is a component library for making Super Metroid fans sites in Vue.

Latest version **0.0.22** (published 2024-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install sm-vue
pnpm add sm-vue
yarn add sm-vue
bun add sm-vue
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.22 |
| Published | 2024-09-09 |
| First published | 2023-06-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 58.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | chriscauley |

## Links

- npm: https://www.npmjs.com/package/sm-vue
- npm.io page: https://npm.io/package/sm-vue

## Dependencies (2)

- [sm-data](https://npm.io/package/sm-data.md) 0.0.6
- [lodash.kebabcase](https://npm.io/package/lodash.kebabcase.md) ^4.1.1

## Recent versions

- 0.0.22 (latest) — 2024-09-09
- 0.0.21 — 2024-04-06
- 0.0.20 — 2023-12-15
- 0.0.19 — 2023-12-15
- 0.0.18 — 2023-11-22
- 0.0.17 — 2023-11-21
- 0.0.16 — 2023-11-20
- 0.0.15 — 2023-11-19
- 0.0.14 — 2023-11-18
- 0.0.13 — 2023-11-12
- 0.0.12 — 2023-11-10
- 0.0.11 — 2023-11-07
- 0.0.10 — 2023-11-06
- 0.0.9 — 2023-11-03
- 0.0.8 — 2023-11-03
- … 7 more at https://npm.io/package/sm-vue/versions

## README

# SM Vue

This is a component library for making Super Metroid fans sites in Vue.

## Usage

You'll first need to add the relevant css files via cdn. The first supplies all the icons for items and the second is for the inventory interface.

``` html
    <link href="https://cdn.unrest.io/super-metroid-icons/super-metroid.css" rel="stylesheet" />
    <link href="https://cdn.unrest.io/super-metroid-icons/inventory.css" rel="stylesheet" />
    <!-- This is necessary if using the varia objectives -->
    <link href="https://cdn.unrest.io/super-metroid-icons/varia.css" rel="stylesheet" />
```

Now you can `npm install --save sm-vue` and start using it in your vue app.

``` js
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import sm from 'sm-vue'

createApp(App).use(components).mount('#app')

// App.vue
<template>
  <sm-item-tracker
    format="grid"
    :inventory="inventory"
    @toggle-item="toggle"
    @add-item="add"
    :width="300"
  />
</template>

<script>
export default {
  data() {
    return { inventory: {} }
  },
  methods: {
    toggle(slug) {
      this.inventory[slug] = !this.inventory[slug]
    },
    add(slug, quantity) {
      this.inventory[slug] = (this.inventory[slug] || 0) + quantity
    }
  }
}
</script>
```

The result should be a 300px inventory tracker component. DM me on discord (@badatmetroid) if you're interested in using this library and I'll add more docs.

## Local development

In order to work locally you must first build icons lib

```
git clone https://github.com/chriscauley/super-metroid.git
cd super-metroid
cd icons
yarn install
yarn build
cd ../
cd sm-vue
yarn dev

# App should now be served at http://localhost:5173
```

The `src/components/index.js` is the entry point for the npm library and `src/main.js` is the entry point for the demo app. No code outside of `src/components` is included in the npm package.

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