@logue/vue2-helpers
TypeScript icon, indicating that this package has built-in type declarations

2.1.4 • Public • Published

Vue2 Helpers

jsdelivr CDN NPM Downloads Open in unpkg npm version Open in Gitpod Twitter Follow

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

or

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.

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.

License

Apache License Version 2.0

Install

npm i @logue/vue2-helpers

DownloadsWeekly Downloads

304

Version

2.1.4

License

Apache-2.0

Unpacked Size

102 kB

Total Files

35

Last publish

Collaborators

  • logue