[Vuejs]-How can Vue component functions be made reusable?

by

1👍

✅

It is possible to create a Vue3 composable that allows to reuse the function in other places.

The tricky part is the vue-router. We have to make sure that the used router inside the composable is actually the same instance of the router as being used inside the App/components. We cannot use useRouter() which is the method for using the router inside the setup function of components (in our composable we do not have a setup function). Therefore, we suggest to put the router definition in an extra module and share this module between App and composable definitions.

1. Create new file router.js

import {createRouter, createWebHashHistory} from 'vue-router'

const routes = [
    {path: '/', name: 'Home', component: Home},
    {path: '/login', name: 'Login', component: Login},
    ...
    {path: "/:pathMatch(.*)*", component: NotFound},
]

const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})

export default router;

2. Use router module in main.js

import {createApp} from 'vue'
import router from './router.js'
import App from './components/App.vue'

const myApp = createApp(App);
myApp.use(router)
     .mount('#app');

3. Create composable loggin.js

import {ref} from 'vue';
import store from './store.js';  // assuming this is the file containing the store definition
import router from './router.js';

export async function authenticateIdentity() {
    const isLoggedIn = ref(store.state.securityStore.isLoggedIn);
    try {
        await store.dispatch('securityStore/autoLogin');
        if (isLoggedIn !== true) {
            return router.push({name: "Login", query: {redirect: router.currentRoute.value.path}})
        }
    } catch (error) {
        return router.push({name: "Login", query: {redirect: router.currentRoute.value.path}})
    }
}

4. Use composable in other components

<script>
import {authenticateIdentity} from 'loggin.js'

export default {
  name: "LoginComponent",
  methods: {
    login(){
      authenticateIdentity().then( ... ).catch( ... );
    }
  }
}
</script>

(adapt project structure / import paths / names)

👤Nechoj

2👍

You can create a plugin

const myAuthPlugin = {
  install(app, options) {
    // move the Authentication logic and method here
  }
}

app.use(myAuthPlugin)
👤Zortext

Leave a comment