/v-tweakpane

Tweakpane ๐Ÿค Vue ๐Ÿ’š

Primary LanguageVueMIT LicenseMIT

V-Tweakpane ๐ŸŽ›๏ธ

Continuous Integration CodeQL Ship js trigger GitHub release (latest SemVer) npm npm npm (downloads) npm bundle size (version) npm type definitions DeepScan grade Snyk Vulnerabilities for GitHub Repo license GitHub contributors

eslint prettier vite vue typescript


Demo

Edit v-tweakpane


Features


Table of Contents

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