# create-permawidget-vue

> 🛠️ The Permapages widget boilerplate sample for Vue.js

Latest version **1.3.1** (published 2022-11-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install create-permawidget-vue
pnpm add create-permawidget-vue
yarn add create-permawidget-vue
bun add create-permawidget-vue
```

## 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.3.1 |
| Published | 2022-11-16 |
| First published | 2022-11-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 101.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | André Nunes |
| Maintainers | itsanuness |

## Links

- npm: https://www.npmjs.com/package/create-permawidget-vue
- Repository: https://github.com/MetaweaveTeam/create-permawidget-vue
- Issues: https://github.com/MetaweaveTeam/create-permawidget-vue/issues
- npm.io page: https://npm.io/package/create-permawidget-vue

## Dependencies (7)

- [vue](https://npm.io/package/vue.md) ^3.2.38
- [pinia](https://npm.io/package/pinia.md) ^2.0.21
- [arweave](https://npm.io/package/arweave.md) ^1.11.6
- [daisyui](https://npm.io/package/daisyui.md) ^2.31.0
- [mime-types](https://npm.io/package/mime-types.md) ^2.1.35
- [vue-router](https://npm.io/package/vue-router.md) ^4.1.5
- [vite-plugin-css-injected-by-js](https://npm.io/package/vite-plugin-css-injected-by-js.md) ^2.1.1

## Recent versions

- 1.3.1 (latest) — 2022-11-16
- 1.3.0 — 2022-11-16
- 1.2.0 — 2022-11-15
- 1.1.0 — 2022-11-15
- 1.1.3 — 2022-11-15
- 1.0.2 — 2022-11-15
- 1.0.1 — 2022-11-15
- 1.0.0 — 2022-11-15

## README

# VueJS Widget Template

This template should help get you started developing a Permapage Widget with Vue 3 in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

## Customize configuration

See [Vite Configuration Reference](https://vitejs.dev/config/).

## Project Setup

1. Change the informations of the project in `package.json`.
2. Change the id of the widget in `src/main.ts` and `index.html`.

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Type-Check, Compile and Minify for Production

**Note:** This will also generate a `dist` folder with the compiled widget.
**Note:** Your CSS is inside `dist/widget.js`.

```sh
npm run build
```

### Lint with [ESLint](https://eslint.org/)

```sh
npm run lint
```

### Deploy to [Permapages](https://pages.arweave.dev/)

**Note:** You need to update your `package.json`, `index.html` and `src/main.ts` with your own information.

```sh
npm run build
```

```sh
npm run deploy <path to your JWT>
```

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