Nook Comments - Answer Overflow

Nook

•Created by thunderbird7756 on 4/18/2024 in #❓・help

NuxtUI / Utable component : question about nested data and slot customization

There is no "status" in your data, but this should work

<UTable :rows="rows" :columns="columns">
  <template #score-data="{ row }">
    <UBadge
      :label="row.current_scam.score"
      :color="row.current_scam.score <= 50 ? 'green' : row.status <= 80 ? 'orange' : 'red'"
      variant="subtle"
      class="capitalize"
    />
  </template>
</UTable>

<UTable :rows="rows" :columns="columns">
  <template #score-data="{ row }">
    <UBadge
      :label="row.current_scam.score"
      :color="row.current_scam.score <= 50 ? 'green' : row.status <= 80 ? 'orange' : 'red'"
      variant="subtle"
      class="capitalize"
    />
  </template>
</UTable>

4 replies

NNuxt

•Created by thunderbird7756 on 4/18/2024 in #❓・help

NuxtUI / Utable component : question about nested data and slot customization

Hi ! Actually the key property is only able to reach the first level of the object. You can use it like this instead:

<UTable :rows="rows" :columns="columns">
  <template #score-data="{ row }">
    <UBadge
      :label="row.status"
      :color="row.status <= 50 ? 'green' : row.status <= 80 ? 'orange' : 'red'"
      variant="subtle"
      class="capitalize"
    />
  </template>
</UTable>

const defaultColumns = [{
        key: 'vin',
        label: 'VIN',
        sortable: true
    }, {
        // Name it according to your needs
        key: 'first.secondLayer.start_date',
        label: 'Date de début de suivi',
        sortable: true
    }, {
        key: 'tenant',
        label: 'Flotte'
    }, {
        key: 'score', // just use score key
        label: 'Score'
    }]

<UTable :rows="rows" :columns="columns">
  <template #score-data="{ row }">
    <UBadge
      :label="row.status"
      :color="row.status <= 50 ? 'green' : row.status <= 80 ? 'orange' : 'red'"
      variant="subtle"
      class="capitalize"
    />
  </template>
</UTable>

const defaultColumns = [{
        key: 'vin',
        label: 'VIN',
        sortable: true
    }, {
        // Name it according to your needs
        key: 'first.secondLayer.start_date',
        label: 'Date de début de suivi',
        sortable: true
    }, {
        key: 'tenant',
        label: 'Flotte'
    }, {
        key: 'score', // just use score key
        label: 'Score'
    }]

I'm not sure my code will exactly suit your needs, but if you can show what a row looks like I could help further

4 replies

NNuxt

•Created by ynk on 4/15/2024 in #❓・help

How to obtain the Nuxt Pro Figma with an existing license?

I think this is not included in Nuxt UI Pro unfortunately It seems to be an add-on for 99$

3 replies

NNuxt

•Created by netwrx on 3/26/2024 in #❓・help

Missing type definitions when using useFetch for a dynamic route

Sorry I'm bad at discord, I miss every thread I spotted the issue and described it here: https://discord.com/channels/473401852243869706/1222581320283324446/1222581320283324446 (or is it unrelated ?)

31 replies

NNuxt

•Created by brunomgmateus on 3/22/2024 in #❓・help

Vue devtools 6.6.1 doesn't seem to work properly since Nuxt 3.10, and stopped displaying in 3.11

Discussed it with posva, he believes there should be no breaking change between vue/devtools 6->7 but from what I digged, it might be caused by a version mismatch. What's funny is that vue-router does not cause the issue even if pinned at v6, while pinia does

11 replies

NNuxt

•Created by brunomgmateus on 3/22/2024 in #❓・help

Vue devtools 6.6.1 doesn't seem to work properly since Nuxt 3.10, and stopped displaying in 3.11

Although v1.1.4 resolves the latest issue, there is a new one introduced, I opened the issue here: https://github.com/nuxt/devtools/issues/640

11 replies

NNuxt

•Created by DANANZ M1 on 3/24/2024 in #❓・help

Why does Nuxt Dev Tools does not have the ability to inspect a component's state ?

Update: there is also this issue. https://github.com/nuxt/devtools/issues/640

4 replies

NNuxt

•Created by Reeed on 3/14/2024 in #❓・help

can't find module tailwindcss

that is because underlying dependencies are not hoisted to your project's level. You could install it as a dev dependency and only import the types, the build will not add Tailwind twice anyway. Or, you could add this line in your .npmrc

[.npmrc]
shamefully-hoist=true

[.npmrc]
shamefully-hoist=true

And reinstall dependencies

5 replies

NNuxt

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

How to run Nitro task in Nuxt using cli?

https://discord.com/channels/473401852243869706/1002541842409193563/1219257836857589770

2 replies

Gaming

Programming