[Vuejs]-Vue, how to create component without template?

by

2👍

✅

You can implement your logic in a router navigation guard:

{
  path: '/callback',
  component: {},
  beforeEnter: (to, from, next) => {
    const isSuccessfulAuth = checkSomething()

    if (isSuccessfulAuth) {
      next({
        name: 'UserInit',
      })
    } else {
      next({
        name: 'AuthFailed',
      })
    }
}

EDIT: I just remebmered a better way (if your logic is synchronous). You can create a redirect route

{
  path: '/callback',
  redirect: () => {
    const isSuccessfulAuth = checkSomething()

    if (isSuccessfulAuth) {
      return {
        name: 'UserInit',
      }
    } else {
      return {
        name: 'AuthFailed',
      }
    }
}
👤Romalex

2👍

A component needs to have either a template or a render function defined. With that said, you can take a look at renderless components or composables.

However, I think it would be simpler to put this logic into state management solution like pinia, where you can handle everything about authentication, and call it from App component or "Callback" page when it mounts.

Edit:

You can also combine it with @Romalex‘s solution. That is, use store in the navigation guard.

{
    path: '/callback',
    component: {},
    beforeEnter: (to, from, next) => {
        const authStore = useAuthStore();

        authStore.checkToken(...); // use extracted parts from regexes
        
        if(isSuccessfulAuth) {
            next({
                name: 'UserInit',
            })
        } else {
            next({
                name: 'AuthFailed'
            })
        }
    }
}
👤Nikola Gava

Leave a comment