vinayakkulkarni
V-Tweakpane 🎛️
Demo
Features
- Power of Vue 3 with awesomeness of Tweakpane!
- Built from scratch using TypeScript
Table of Contents
Installation
npm i tweakpane v-tweakpane @tweakpane/plugin-essentialsBuild Setup
# install dependencies
$ npm install
# package lib
$ npm run buildUsage
Global component:
// main.ts
import { VTweakpane } from 'v-tweakpane';
import { createApp } from 'vue';
const app = createApp({});
app.component('VTweakpane', VTweakpane);Or use locally
// component.vue
<script lang="ts">
import { defineComponent } from 'vue';
import { VTweakpane } from 'v-tweakpane';
export default defineComponent({
components: {
VTweakpane,
},
});
</script>For Nuxt 3, create a file in plugins/v-tweakpane.ts
import { VTweakpane } from 'v-tweakpane';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('VTweakpane', VTweakpane);
});then import the file in nuxt.config.{j|t}s:
export default {
// ...
plugins: [
// ...
{ src: '~/plugins/v-tweakpane', mode: 'client' },
// ...
],
// ...
};Example
<template>
<v-tweakpane :pane="state.pane" />
</template>
<script lang="ts">
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 };
},
});
</script>
<style>
@import 'v-tweakpane/dist/v-tweakpane.css';
</style>Contributing
- Fork it (https://github.com/vinayakkulkarniv-tweakpane/fork)
- Create your feature branch (
git checkout -b feat/new-feature) - Commit your changes (
git commit -Sam 'feat: add feature') - Push to the branch (
git push origin feat/new-feature) - Create a new Pull Request
Note:
- Please contribute using GitHub Flow
- Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
- PS. Ensure your commits are signed. Read why
Author
v-image © Vinayak, Released under the MIT License.
Authored and maintained by Vinayak Kulkarni with help from contributors (list).
vinayakkulkarni.dev · GitHub @vinayakkulkarni · Twitter @_vinayak_k