https://github.com/vinayakkulkarni/v-tweakpane
Tweakpane 🤝 Vue 💚
https://github.com/vinayakkulkarni/v-tweakpane
tweakpane typescript v-tweakpane vue vue-tweakpane vue3
Last synced: 3 months ago
JSON representation
Tweakpane 🤝 Vue 💚
- Host: GitHub
- URL: https://github.com/vinayakkulkarni/v-tweakpane
- Owner: vinayakkulkarni
- License: mit
- Created: 2021-07-17T14:47:34.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-21T23:24:35.000Z (over 1 year ago)
- Last Synced: 2024-04-14T09:51:38.708Z (about 1 year ago)
- Topics: tweakpane, typescript, v-tweakpane, vue, vue-tweakpane, vue3
- Language: Vue
- Homepage: https://v-tweakpane.netlify.app
- Size: 74.1 MB
- Stars: 24
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# V-Tweakpane 🎛️
[](https://github.com/vinayakkulkarni/v-tweakpane/actions/workflows/ci.yml)
[](https://github.com/vinayakkulkarni/v-tweakpane/actions/workflows/codeql.yml)
[](https://github.com/vinayakkulkarni/v-tweakpane/actions/workflows/shipjs-trigger.yml)
[](https://github.com/vinayakkulkarni/v-tweakpane/releases)
[](https://www.npmjs.com/package/v-tweakpane)
[](http://npm-stat.com/charts.html?package=v-tweakpane)
[](https://npm-stat.com/charts.html?package=v-tweakpane)
[](https://bundlephobia.com/package/v-tweakpane@latest)
[](https://github.com/vinayakkulkarni/v-tweakpane/blob/master/package.json)
[](https://deepscan.io/dashboard#view=project&tid=9055&pid=17923&bid=426854)
[](https://snyk.io/test/github/vinayakkulkarni/v-tweakpane)
[](https://github.com/vinayakkulkarni/v-tweakpane/blob/master/LICENSE)
[](https://github.com/vinayakkulkarni/v-tweakpane/graphs/contributors)
[](https://eslint.org/)
[](https://prettier.io/)
[](https://vitejs.dev/)
[](https://vuejs.org/)
[](https://www.typescriptlang.org/)
---
## Demo
[](https://stackblitz.com/edit/v-tweakpane?file=src/App.vue)
---
## Features
- Power of [Vue 3](https://vuejs.org) with awesomeness of [Tweakpane](https://cocopon.github.io/tweakpane/)!
- Built from scratch using [TypeScript](https://www.typescriptlang.org)
---
## Table of Contents
- [V-Tweakpane 🎛️](#v-tweakpane-️)
- [Demo](#demo)
- [Features](#features)
- [Table of Contents](#table-of-contents)
- [Installation](#installation)
- [Build Setup](#build-setup)
- [Usage](#usage)
- [Example](#example)
- [Contributing](#contributing)
- [Author](#author)
### Installation
```sh
npm i tweakpane v-tweakpane @tweakpane/plugin-essentials
```
### Build Setup
```bash
# install dependencies
$ npm install
# package lib
$ npm run build
```
### Usage
Global component:
```js
// main.ts
import { VTweakpane } from 'v-tweakpane';
import { createApp } from 'vue';
const app = createApp({});
app.component('VTweakpane', VTweakpane);
```
Or use locally
```js
// component.vue
import { defineComponent } from 'vue';
import { VTweakpane } from 'v-tweakpane';
export default defineComponent({
components: {
VTweakpane,
},
});
```
For Nuxt 3, create a file in `plugins/v-tweakpane.ts`
```js
import { VTweakpane } from 'v-tweakpane';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('VTweakpane', VTweakpane);
});
```
then import the file in `nuxt.config.{j|t}s`:
```js
export default {
// ...
plugins: [
// ...
{ src: '~/plugins/v-tweakpane', mode: 'client' },
// ...
],
// ...
};
```
### Example
```html
import { defineComponent, ref } from 'vue';
import { VTweakpane } from 'v-tweakpane';
export default defineComponent({
name: 'App',
components: { VTweakpane },
setup() {
const state = ref({
pane: {
title: 'My Awesome Pane',
inputs: [
{
factor: 123,
title: 'hello',
color: '#0f0',
},
],
},
});
return { state };
},
});
@import 'v-tweakpane/dist/v-tweakpane.css';
```
## Contributing
1. Fork it ([https://github.com/vinayakkulkarniv-tweakpane/fork](https://github.com/vinayakkulkarniv-tweakpane/fork))
2. Create your feature branch (`git checkout -b feat/new-feature`)
3. Commit your changes (`git commit -Sam 'feat: add feature'`)
4. Push to the branch (`git push origin feat/new-feature`)
5. Create a new [Pull Request](https://github.com/vinayakkulkarniv-tweakpane/compare)
_Note_:
1. Please contribute using [GitHub Flow](https://web.archive.org/web/20191104103724/https://guides.github.com/introduction/flow/)
2. Commits & PRs will be allowed only if the commit messages & PR titles follow the [conventional commit standard](https://www.conventionalcommits.org/), _read more about it [here](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional#type-enum)_
3. PS. Ensure your commits are signed. _[Read why](https://withblue.ink/2020/05/17/how-and-why-to-sign-git-commits.html)_
## Author
**v-image** © [Vinayak](https://github.com/vinayakkulkarni), Released under the [MIT](./LICENSE) License.
Authored and maintained by Vinayak Kulkarni with help from contributors ([list](https://github.com/vinayakkulkarniv-tweakpane/contributors)).
> [vinayakkulkarni.dev](https://vinayakkulkarni.dev) · GitHub [@vinayakkulkarni](https://github.com/vinayakkulkarni) · Twitter [@\_vinayak_k](https://twitter.com/_vinayak_k)