README.md

V-Tweakpane 🎛️

---

Demo

---

Features

• Power of Vue 3 with awesomeness of Tweakpane!
• Built from scratch using TypeScript

---

Table of Contents

• V-Tweakpane 🎛️
  • Demo
  • Features
  • Table of Contents
    • Installation
    • Build Setup
    • Usage
    • Example
  • Contributing
  • Author

Installation

npm i tweakpane v-tweakpane @tweakpane/plugin-essentials

Build Setup

# install dependencies
$ npm install

# package lib
$ npm run build

Usage

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

1. Fork it (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

Note:

1. Please contribute using GitHub Flow
2. Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
3. 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