Kealanau
Kealanau
PostsComments
NNuxt
Created by Kealanau on 5/3/2024 in #❓・help
Ui Nuxt UCarousel passing in a value to start it on
bump
3 replies
NNuxt
Created by Artist201 on 5/4/2024 in #❓・help
Prevent a package from being treeshaken/ deleted from final build on production
what a shame, no problem 🙂
21 replies
NNuxt
Created by Artist201 on 5/4/2024 in #❓・help
Prevent a package from being treeshaken/ deleted from final build on production
yeah, so this was my project that was then used on vercel 
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  modules: [
    '@nuxt/content',
    '@nuxt/ui',
    '@nuxthq/studio',
    '@nuxtjs/fontaine',
    '@nuxtjs/google-fonts',
    'nuxt-og-image',
    '@pinia/nuxt',
    '@nuxt/image',
  ],
  
  build: {
    transpile: ['zxing'],
  },
  hooks: {
    // Define `@nuxt/ui` components as global to use them in `.md` (feel free to add those you need)
    'components:extend': (components) => {
      const globals = components.filter((c) => ['UButton'].includes(c.pascalName))

      globals.forEach((c) => c.global = true)
    }
  },
  ui: {
    icons: ['ic', 'mdi']
  },
  // Fonts
  fontMetrics: {
    fonts: ['DM Sans']
  },
  googleFonts: {
    display: 'swap',
    download: true,
    families: {
      'DM+Sans': [400, 500, 600, 700]
    }
  },
  // Devtools / Typescript
  devtools: { enabled: true },
  typescript: { strict: false }
})
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  modules: [
    '@nuxt/content',
    '@nuxt/ui',
    '@nuxthq/studio',
    '@nuxtjs/fontaine',
    '@nuxtjs/google-fonts',
    'nuxt-og-image',
    '@pinia/nuxt',
    '@nuxt/image',
  ],
  
  build: {
    transpile: ['zxing'],
  },
  hooks: {
    // Define `@nuxt/ui` components as global to use them in `.md` (feel free to add those you need)
    'components:extend': (components) => {
      const globals = components.filter((c) => ['UButton'].includes(c.pascalName))

      globals.forEach((c) => c.global = true)
    }
  },
  ui: {
    icons: ['ic', 'mdi']
  },
  // Fonts
  fontMetrics: {
    fonts: ['DM Sans']
  },
  googleFonts: {
    display: 'swap',
    download: true,
    families: {
      'DM+Sans': [400, 500, 600, 700]
    }
  },
  // Devtools / Typescript
  devtools: { enabled: true },
  typescript: { strict: false }
})
21 replies
NNuxt
Created by Artist201 on 5/4/2024 in #❓・help
Prevent a package from being treeshaken/ deleted from final build on production
hmm, because i was able to uplad a project that uses zxing to vercel with the build transpile thing
21 replies
NNuxt
Created by Artist201 on 5/4/2024 in #❓・help
Prevent a package from being treeshaken/ deleted from final build on production
is the error the same in vercel?
21 replies
NNuxt
Created by Artist201 on 5/4/2024 in #❓・help
Prevent a package from being treeshaken/ deleted from final build on production
Not entirely sure, but i do know with some packages you need to wrap it up in the nuxt build as a list of transpiled packages in your nuxt config. In say the case you want to use https://github.com/zxing/zxing with, you'd want to do in the nuxt.config.ts. 
  build: {
    transpile: ['zxing'],
  },
  build: {
    transpile: ['zxing'],
  },
So you may need to do 
  build: {
    transpile: ['axiom'],
  },
  build: {
    transpile: ['axiom'],
  },
21 replies
NNuxt
Created by Niza on 5/3/2024 in #❓・help
Manipulate Row Values in a Nuxt UI's UTable
So to represent the date in that format, you'd want something like the below 
const timeZone = 'UTC';
const options = { timeZone, month: 'numeric', day: 'numeric', year: 'numeric' };
// this assumes you want american date system of mm/dd/yyyy
date.toLocaleString('en-US', options);
const timeZone = 'UTC';
const options = { timeZone, month: 'numeric', day: 'numeric', year: 'numeric' };
// this assumes you want american date system of mm/dd/yyyy
date.toLocaleString('en-US', options);
You can either apply it to the column of your dataset, or apply it on that data by expanding out the template https://ui.nuxt.com/components/table#column-data 
<UTable :rows="latestAppointments" :columns="appointmentColumns">
    <template #date-data="{ row }">
      <span class="if you want to apply styling ">{{ row.date.toLocaleString('en-US', options); }}</span>
    </template>
    <template #reason-data="{ row }">
      <span class="if you want to apply styling ">{{ row.reason}}</span>
    </template>
</UTable>
<UTable :rows="latestAppointments" :columns="appointmentColumns">
    <template #date-data="{ row }">
      <span class="if you want to apply styling ">{{ row.date.toLocaleString('en-US', options); }}</span>
    </template>
    <template #reason-data="{ row }">
      <span class="if you want to apply styling ">{{ row.reason}}</span>
    </template>
</UTable>
Also in future, just copy the code and provide a bit more context, as it means i could just run it locally and ensure it's working 100% instead of inferring.
11 replies
NNuxt
Created by Kealanau on 5/3/2024 in #❓・help
Ui Nuxt UCarousel passing in a value to start it on
I've build a stackblitz - https://stackblitz.com/edit/nuxt-starter-bzph5p?file=pages%2Findex.vue
3 replies
NNuxt
Created by hz2222 on 5/3/2024 in #❓・help
how to use router in a pinia store in Nuxt 3?
https://pinia.vuejs.org/core-concepts/plugins.html#Nuxt-js https://pinia.vuejs.org/core-concepts/plugins.html#Introduction Reading through this, it seems like you'd be needing to set like 
import { markRaw } from 'vue'
// adapt this based on where your router is
import { router } from './router'

pinia.use(({ store }) => {
  store.router = markRaw(router)
})
import { markRaw } from 'vue'
// adapt this based on where your router is
import { router } from './router'

pinia.use(({ store }) => {
  store.router = markRaw(router)
})
10 replies
NNuxt
Created by hz2222 on 5/3/2024 in #❓・help
how to use router in a pinia store in Nuxt 3?
Are you looking for the nuxt context?
10 replies
NNuxt
Created by hz2222 on 5/3/2024 in #❓・help
how to use router in a pinia store in Nuxt 3?
Why would you be keeping the router stored in Pinia?
10 replies