Nisthar Posts - Answer Overflow

Nisthar

Explore posts from servers

•Created by Nisthar on 10/31/2024 in #❓・help

How to pass data from plugins to server api endpoint in nuxt 3?

I have a module in my nuxt app. It uses a plugin to auto refresh tokens if its expired (both on client side and on server load). I need to extend this and after refreshing tokens, fetch the user data and pass it to the app's server api endpoints. How do i do that? I have tried adding middleware into the module. It seems like middlewares are good solution but it runs before the plugin. so it doesn't get the refreshed token to fetch the user. Does anyone have a solution to this issue?

20 replies

NNuxt

•Created by Nisthar on 10/24/2024 in #❓・help

Does plugins run after server middlewares?

I have a module plugin like plugin.ts:

import { defineNuxtPlugin, useRuntimeConfig } from '#app'

export default defineNuxtPlugin(async (nuxtApp) => {
  
  const config = useRuntimeConfig();
  const { fetchUser } = useAuth();
  const { token, checkAutoRefresh } = useToken();
  const user = useUser();

  async function checkIfUserExists() {
      if (!user.value && token.value) {
        await fetchUser();
      }
  }

  // do the checks server-side, instead of using hook 'app:created', 
  // as this hook is not called on SSR=true (static generation)
  await checkAutoRefresh();
  await checkIfUserExists();

  nuxtApp.hook('page:start', async () => {
    if (import.meta.client) {
      await checkAutoRefresh();
      await checkIfUserExists();
    }
  })
})

import { defineNuxtPlugin, useRuntimeConfig } from '#app'

export default defineNuxtPlugin(async (nuxtApp) => {
  
  const config = useRuntimeConfig();
  const { fetchUser } = useAuth();
  const { token, checkAutoRefresh } = useToken();
  const user = useUser();

  async function checkIfUserExists() {
      if (!user.value && token.value) {
        await fetchUser();
      }
  }

  // do the checks server-side, instead of using hook 'app:created', 
  // as this hook is not called on SSR=true (static generation)
  await checkAutoRefresh();
  await checkIfUserExists();

  nuxtApp.hook('page:start', async () => {
    if (import.meta.client) {
      await checkAutoRefresh();
      await checkIfUserExists();
    }
  })
})

The plugin checks if the token is expired and refreshes it on the SSR. I am trying to get the refreshed token in the server middleware so i can fetch the currently logged in user in the server. But it seems like the server middlewares are run first before the plugin ever runs. I need to use plugin to make the SSR auth work. How do i get the refreshed token in the middleware so i can fetch for the user?

5 replies

NNuxt

•Created by Nisthar on 9/15/2024 in #❓・help

why isn't input's value not updating when using useState value in it?

guys i have a useState that doesn't have any values, it later gets set to an object after a fetch request to an api But if i use this useState object's value for an input, the input value is always empty

<Input id="account-id" :value="user.id" />

<Input id="account-id" :value="user.id" />

export const useUser = (): Ref<UserType> =>
  useState<UserType>('myapp.user')

export const useUser = (): Ref<UserType> =>
  useState<UserType>('myapp.user')

const user = useUser() anyone know why the input's value never changes when the useState changes?

18 replies

NNuxt

•Created by Nisthar on 9/8/2024 in #❓・help

Uncaught SyntaxError: The requested module '/_nuxt/middleware/auth.global.ts' when restarting nuxt

I get this error in the browser console everytime i restart the nuxt server. when this happens the dev tools doesn't work and hmr also doesn't work. This is my middleware middleware/auth.global.ts

export default defineNuxtRouteMiddleware(async (to, from) => {
  const allowedPaths = [
    '/',
    '/login',
    '/signup',
    '/forgot-password',
    '/reset-password',
  ]
  const { fetchUser, setUser } = useDirectusAuth();
  const user = useDirectusUser();
  if (!user.value) {
    const user = await fetchUser();
    setUser(user.value);
  }
  if (!user.value && !allowedPaths.includes(to.path)) {
    return navigateTo("/login");
  }
});

export default defineNuxtRouteMiddleware(async (to, from) => {
  const allowedPaths = [
    '/',
    '/login',
    '/signup',
    '/forgot-password',
    '/reset-password',
  ]
  const { fetchUser, setUser } = useDirectusAuth();
  const user = useDirectusUser();
  if (!user.value) {
    const user = await fetchUser();
    setUser(user.value);
  }
  if (!user.value && !allowedPaths.includes(to.path)) {
    return navigateTo("/login");
  }
});

I comment the middleware and uncomment it again to fix the error. But if i restart the server or change .env file, it happens again.

2 replies

NNuxt

•Created by Nisthar on 9/3/2024 in #❓・help

How to use layouts (using named slots)?

I want to use the dashboard-default.vue layout inside all the dashboard pages. In the dashboard-default.vue, there's 2 named slots for header and content. How do i use these slots inside the dashboard pages? I tried this pages/dashboard.vue

<template>
  <div>
    <NuxtLayout name="dashboard-defualt">
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>

<template>
  <div>
    <NuxtLayout name="dashboard-defualt">
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>

and inside the pages/dashboard/index.vue:

<template> //error here because you can't use template inside template i think
  <div>
    
      <template #header>
        Page title
      </template>
      <template #content>
        dfsdf
      </template>
   
  </div>
</template>

<template> //error here because you can't use template inside template i think
  <div>
    
      <template #header>
        Page title
      </template>
      <template #content>
        dfsdf
      </template>
   
  </div>
</template>

This is pages/dashboard.vue page:

<template>
  <div>
    <NuxtLayout name="dashboard-defualt">
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>

<template>
  <div>
    <NuxtLayout name="dashboard-defualt">
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>

118 replies

NNuxt

•Created by Nisthar on 9/1/2024 in #❓・help

Why can't i publish a nuxt module using github?

2 replies

NNuxt

•Created by Nisthar on 8/30/2024 in #❓・help

Can you use a module's original source code in your app?

I mean can you use a nuxt module's original source code in your app's /modules directory without building?

4 replies

NNuxt

•Created by Nisthar on 4/10/2024 in #❓・help

I am getting error 500 on deploying to cloudfalre pages. The api endpoints are working.

I am getting error 500 on deploying to cloudfalre pages. The api endpoints are working. only the normal routes are giving 500. How can i debug this?

13 replies

NNuxt

•Created by Nisthar on 3/10/2024 in #❓・help

Can someone answer this question?

4 replies

NNuxt

•Created by Nisthar on 3/9/2024 in #❓・help

No intellisense on nuxt ui components in vscode

2 replies

NNuxt

•Created by Nisthar on 2/28/2024 in #❓・help

How do you do multi tenant apps with nuxt3?

I found this package called "nuxt-multitenancy". That supports multi tenancy but it is hard to configure with a lot of pages under a subdomain. Are there any good alternatives to this package?

1 replies

Gaming

Programming