Sumit Posts - Answer Overflow

Sumit

•Created by Sumit on 5/23/2024 in #❓・help

Nuxt3 Build Breaking after Storybook Integration

I have recently integrated Storybook on a Nuxt3 project and the strange issue I'm encountering is that after the integration, dev server runs perfectly fine serving app and storybook on different ports. But as soon as I build the app, it seems to be broken. The build process gives no errors or any sign of anything being broken but when I open the built app, it looks like no styling is applied at all and all the layout renders broken. I'm have been trying to figure out what might be causing this issue for a couple of days and have no luck yet. Any help will be greatly appreciated.

2 replies

NNuxt

•Created by Sumit on 7/11/2023 in #❓・help

Component Driven Emit Chain

I have a question. I'm trying to follow Component Driven Development https://www.componentdriven.org/. If I understand it correctly, it recommends keeping data binding at the page level or higher. Now, to follow that, I'm having to pass certain actions into deep child components with multiple emits and if I'm passing functions that need arguments, I'm also required to create multiple functions in the script tag to handle arguments during emits. I know I can avoid a lot of prop drilling and emits by using useState and accessing states in child components directly. But I'm afraid that will not let my components stay presentational, testable and reusable. So, my question is how can I get the best of both worlds? How can I keep my components simple, presentational, testable and reusable at the same time avoid prop drilling and emit chains?

1 replies

NNuxt

•Created by Sumit on 6/8/2023 in #❓・help

State Management

What is the recommended way to manage the state globally in a Nuxt app? Does useState persist data on the server? If not, how do we handle global information like a JWT token in a Nuxt app so that we can access it from any page/component across refreshes?

2 replies

NNuxt

•Created by Sumit on 4/2/2023 in #❓・help

Reload During Mounting

I am trying to load a few components conditionally. Here is the code snippet.

// app.vue
<template>
  <div v-if="isLoggedIn">
    <NuxtPage />
  </div>
  <div v-else-if="unauthorized">
    <ErrorCard :error-status="403" :error-desc="$t('not-a-valid-azure-group-member')" />
  </div>
</template>

<script setup lang='ts'>
import { useAuthStore } from '~/store/auth'
let unauthorized = ref(false)
let isLoggedIn = ref(false);
await getToken()
const currentUser = useAuthStore()
if (!currentUser.loggedIn) {
  unauthorized.value = true
} else {
  isLoggedIn.value = true;
}
await signIn()
</script>

// app.vue
<template>
  <div v-if="isLoggedIn">
    <NuxtPage />
  </div>
  <div v-else-if="unauthorized">
    <ErrorCard :error-status="403" :error-desc="$t('not-a-valid-azure-group-member')" />
  </div>
</template>

<script setup lang='ts'>
import { useAuthStore } from '~/store/auth'
let unauthorized = ref(false)
let isLoggedIn = ref(false);
await getToken()
const currentUser = useAuthStore()
if (!currentUser.loggedIn) {
  unauthorized.value = true
} else {
  isLoggedIn.value = true;
}
await signIn()
</script>

I expect the above code to show <NuxtPage /> when the user is logged in and the error component only when the user is unauthorized. But, when we load the app for the first time by visiting localhost:3000, it briefly shows the error component and then refreshes to show the NuxtPage. I am not able to figure out what's wrong with the code. Any help will be highly appreciated. PS. The login system is using Microsoft Authentication Library (MSAL). getToken fetches a token and saves it in AuthStore which is then fetched using useAuthStore. MSAL works by redirecting to a Microsoft Authentication Portal and then if the token is already present for the user (already signed in), redirects back to the site, or if the token is not already present then keeps the user on its authentication portal until the user completes signing in.

9 replies

Gaming

Programming