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

The dashed lines are left for compatibility, but since equivalent commands are supported on the vue-router side, they are flagged as deprecated. Please use them from now on.

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.
`useTheme`(): Theme	Get and set Theme variables.
`useDisplay`(): Breakpoint	Get breakpoint, It's an API similar to Vuetify3's useDisplay.

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.

It is mainly used for dynamic rewriting in the head tag and pouring Vue components into the DOM generated by external libraries other than Vue such as lightbox. This injected Vue component also contains Vue events.

Props	Description
to	Target DOM (Specified by `querySelector`)
where	Insert innerHTML to target DOM. Accepts `after` or `before`. (Default is `after`)
disabled	boolean

This component works standalone from a CDN.

<script src="https://cdn.jsdelivr.net/npm/@logue/vue2-helpers@latest/teleport.umd.js"></script>

Teleport Example

<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>

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

vue-helpers/h-demi

This program is for library components developers. This is to resolve the incompatibility of the h function when creating a library that supports both Vue2 and Vue3. It is unnecessary if you do not use the h function.

See the address below for details. https://github.com/vueuse/vue-demi/issues/65

License

Apache License Version 2.0

Original version By ambit_tsai.
Modified and add some feature by Logue.