https://github.com/themustafaomar/vue-milsymbol
A Vue wrapper component for milsymbol
https://github.com/themustafaomar/vue-milsymbol
military-symbology milsymbol nato-stanag
Last synced: about 1 month ago
JSON representation
A Vue wrapper component for milsymbol
- Host: GitHub
- URL: https://github.com/themustafaomar/vue-milsymbol
- Owner: themustafaomar
- License: mit
- Created: 2023-03-10T20:49:20.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-28T21:35:31.000Z (about 2 years ago)
- Last Synced: 2025-03-19T00:38:12.839Z (2 months ago)
- Topics: military-symbology, milsymbol, nato-stanag
- Language: JavaScript
- Homepage: https://github.com/themustafaomar/vue-milsymbol
- Size: 212 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-milsymbol
A Vue wrapper component for Milsymbol, for more information please visit [milsymbol](https://github.com/spatialillusions/milsymbol)
⚠️ Attention: This is pre-release alpha version Vue wrapper component for milsymbol, there will be lots of changes coming soon.
## Versions
| Vuejs version | Package version | Branch |
| :--- |:---------------:| ---: |
| 3.x | 2.x | `main` (in development) |
| 2.x | 1.x | [legacy](https://github.com/themustafaomar/vue-milsymbol/tree/legacy) |
## Installation
To install `vue-milsymbol` you need to install this package via npm.
```js
npm i vue-milsymbol
```
## Quick start
```js
import { createApp, h } from 'vue'
import VMilsymbol from 'vue-milsymbol'
const app = createApp({
render: ...
})
app.use(VMilsymbol, {
// Set default global options
// See: https://www.spatialillusions.com/milsymbol/documentation.html
size: 50
})
app.mount('#app')
```
In your component just declare `v-milsymbol` then add your options.
```html
export default {
data: () => ({
sidc: 'sfgpewrh--mt'
}),
mounted() {
console.log(this.$refs.msymbol.getInstance())
// To change symbol automatically you just
// need to change the sidc and it'll change Immediately
setTimeout(() => this.sidc = '10031000000000000000', 1000)
}
}
```
### Working with the package
```
npm run serve
```
### Compile for production
```
npm run build
```