Vue2 Helpers

A util package to use Vue 2 with Composition API easily. This fork supports Vuetify2.

@vue/composition-api is required separately when using under Vue 2.7.

⬇️ Install

npm i -S @logue/vue2-helpers

yarn add -D @logue/vue2-helpers

📃 Usage

import { createVuexHelpers } from '@logue/vue2-helpers';
import { useRouter } from 'vue-router/composable';

const { useState } = createVuexHelpers<
    RootState, RootGetters, RootMutations, RootActions
>();
// Get a reactive and mutable ref object "stateA"
const { stateA } = useState('module', ['stateA']);

const router = useRouter();
router.push('/login');

✨ API

vue2-helpers

Features	Description
`createVuexHelpers`<RootState, RootGetters, RootMutations, RootActions>(): {`useState`, `useGetters`, `useMutations`, `useActions`}	The helper methods in return value are used to replace `mapState`, `mapGetters`, `mapMutations`, `mapActions`

vue2-helpers/vuex

Features	Description
`createStore`<S>(options: StoreOptions<S>): Store<S>
`useStore`<S = any>(): Store<S>	Get Vuex store instance.

vue2-helpers/vue-router

Features	Description
`createRouter`(options: RouterOptions): Router
~~`onBeforeRouteLeave`(leaveGuard: NavigationGuard): void~~
~~`onBeforeRouteUpdate`(updateGuard: NavigationGuard): void~~
~~`useRoute`(): RouteLocationNormalized~~	Get Route instance
~~`useRouter`(): Router~~	Get Router instance
router.`isReady`(): Promise<void>

vue2-helpers/vuetify

Features	Description
`createVuetify`(options: UserVuetifyPreset): Vuetify	Create Vuetify Instance
`useVuetify`(): Framework	Get Vuetify Instance.

vue-helpers/teleport

This is an alternative to vue3's teleport component. You can use the documentation provided by vue as a starting point to using this package.

<template>
  <div>
    <button @click="modalOpen = true">
      Open full screen modal! (With teleport!)
    </button>

    <teleport to="body">
      <div v-if="modalOpen" class="modal">
        <div>
          I'm a teleported modal! (My parent is "body")
          <button @click="modalOpen = false">Close</button>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import Teleport from '@logue/vue2-helpers/teleport';

export default defineComponent({
  components: {
    Teleport,
  },
  setup() {
    return {
      modalOpen: ref(false),
    };
  },
});
</script>

Props	Description
to	Target DOM (querySelector)
where	Insert innerHTML to target DOM, `after` or `before`.
disabled	boolean

This component is rewritten to composition api of Mechazawa's vue2-teleport.

License

MIT

Original version By ambit_tsai.

Modified and add some feature by Logue.