Add custom config in nuxt ui button

export default defineAppConfig({
  ui: {
    button: {
      default: {
        size: 'md',
        color: 'gray',
        variant: 'ghost'
      }
    }
  }
})

export default defineAppConfig({
  ui: {
    button: {
      default: {
        size: 'md',
        color: 'gray',
        variant: 'ghost'
      }
    }
  }
})

<template>
  <UButton :ui="{ rounded: 'rounded-full' }">Button</UButton>
</template>

<template>
  <UButton :ui="{ rounded: 'rounded-full' }">Button</UButton>
</template>

import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        'my-custom-color': {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49'
        }
      }
    }
  }
}

import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        'my-custom-color': {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49'
        }
      }
    }
  }
}

export default defineAppConfig({
  ui: {
    button: {
      color: {
        'my-custom-color': {
          solid: 'bg-my-custom-color-500 hover:bg-my-custom-color-600 text-white'
          // Add other variants as needed
        }
      }
    }
  }
})

export default defineAppConfig({
  ui: {
    button: {
      color: {
        'my-custom-color': {
          solid: 'bg-my-custom-color-500 hover:bg-my-custom-color-600 text-white'
          // Add other variants as needed
        }
      }
    }
  }
})

<template>
  <UButton color="my-custom-color">Custom Color Button</UButton>
</template>

<template>
  <UButton color="my-custom-color">Custom Color Button</UButton>
</template>

import type { ButtonColor } from '#ui/types'

declare module '#ui/types' {
  interface ButtonColor {
    custom: string
  }
}

export {}

import type { ButtonColor } from '#ui/types'

declare module '#ui/types' {
  interface ButtonColor {
    custom: string
  }
}

export {}

export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      include: ['./types/*.d.ts'],
    },
  },
  // ... autres configurations
})

export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      include: ['./types/*.d.ts'],
    },
  },
  // ... autres configurations
})

// app.config.ts
export default defineAppConfig({
  ui: {
    button: {
      default: { size: 'lg' },
      color: {
        'custom': {
          solid: 'bg-mgp-light-blue hover:bg-mgp-light-blue/50 text-white'
        }
      }
    },
  }
})

// app.config.ts
export default defineAppConfig({
  ui: {
    button: {
      default: { size: 'lg' },
      color: {
        'custom': {
          solid: 'bg-mgp-light-blue hover:bg-mgp-light-blue/50 text-white'
        }
      }
    },
  }
})

<template>
  <UButton color="custom" label="Custom Color Button" />
</template>

<template>
  <UButton color="custom" label="Custom Color Button" />
</template>

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    // Vos options de compilateur existantes...
  },
  "include": [
    "./.nuxt/tsconfig.json",
    "@/utils/types/*.d.ts"
  ]
}

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    // Vos options de compilateur existantes...
  },
  "include": [
    "./.nuxt/tsconfig.json",
    "@/utils/types/*.d.ts"
  ]
}

useSeoMeta({
  twitterCard: 'summary_large_image',
  twitterImage: '/images/twitter-image.png',
  ogImage: '/images/og-image.png',
})

useSeoMeta({
  twitterCard: 'summary_large_image',
  twitterImage: '/images/twitter-image.png',
  ogImage: '/images/og-image.png',
})

   useSeoMeta({
     twitterCard: 'summary_large_image',
     twitterImage: `${useRuntimeConfig().public.siteUrl}/images/twitter-image.png`,
     ogImage: `${useRuntimeConfig().public.siteUrl}/images/og-image.png`,
   })
   

   useSeoMeta({
     twitterCard: 'summary_large_image',
     twitterImage: `${useRuntimeConfig().public.siteUrl}/images/twitter-image.png`,
     ogImage: `${useRuntimeConfig().public.siteUrl}/images/og-image.png`,
   })
   

   export default defineNuxtConfig({
     bridge: {
       typescript: true
     }
   })
   

   export default defineNuxtConfig({
     bridge: {
       typescript: true
     }
   })
   

   import { definePageMeta } from '#imports'

   definePageMeta({
     layout: 'site'
   })
   

   import { definePageMeta } from '#imports'

   definePageMeta({
     layout: 'site'
   })
   

import type { ButtonSize } from '#ui/types'

declare module '#ui/types' {
  interface ButtonSize {
    '2xl': string
  }
}

export {}

import type { ButtonSize } from '#ui/types'

declare module '#ui/types' {
  interface ButtonSize {
    '2xl': string
  }
}

export {}

{
  "extends": "./.nuxt/tsconfig.json",
  "include": ["./.nuxt/tsconfig.json", "./nuxt-ui.d.ts"]
}

{
  "extends": "./.nuxt/tsconfig.json",
  "include": ["./.nuxt/tsconfig.json", "./nuxt-ui.d.ts"]
}

export default defineAppConfig({
  ui: {
    button: {
      default: { size: 'lg' },
      size: {
        '2xl': 'text-lg',
      },
      gap: {
        '2xl': 'gap-x-3.5',
      },
      padding: {
        '2xl': 'p-3.5'
      },
      square: {
        '2xl': 'p-3.5',
      },
      color: {
        'mgp-blue': {
          solid: 'shadow-sm ring-mgp-blue-300 text-white bg-mgp-blue-500 hover:bg-mgp-blue-600 disabled:bg-mgp-blue-500 aria-disabled:bg-mgp-blue-500 focus-visible:ring-2 focus-visible:ring-primary-500 '
        },
        'mgp-blue-light': {
          solid: 'shadow-sm ring-mgp-blue-light-300 text-white bg-mgp-blue-light-500 hover:bg-mgp-blue-light-600 disabled:bg-mgp-blue-light-500 aria-disabled:bg-mgp-blue-light-500 focus-visible:ring-2 focus-visible:ring-primary-500 '
        },
        'mgp-slate': {
          solid: 'shadow-sm ring-mgp-slate-300 text-white bg-mgp-slate-500 hover:bg-mgp-slate-700 disabled:bg-mgp-slate-500 aria-disabled:bg-mgp-slate-500 focus-visible:ring-2 focus-visible:ring-primary-500 '
        },
      }
    }
  }
})

export default defineAppConfig({
  ui: {
    button: {
      default: { size: 'lg' },
      size: {
        '2xl': 'text-lg',
      },
      gap: {
        '2xl': 'gap-x-3.5',
      },
      padding: {
        '2xl': 'p-3.5'
      },
      square: {
        '2xl': 'p-3.5',
      },
      color: {
        'mgp-blue': {
          solid: 'shadow-sm ring-mgp-blue-300 text-white bg-mgp-blue-500 hover:bg-mgp-blue-600 disabled:bg-mgp-blue-500 aria-disabled:bg-mgp-blue-500 focus-visible:ring-2 focus-visible:ring-primary-500 '
        },
        'mgp-blue-light': {
          solid: 'shadow-sm ring-mgp-blue-light-300 text-white bg-mgp-blue-light-500 hover:bg-mgp-blue-light-600 disabled:bg-mgp-blue-light-500 aria-disabled:bg-mgp-blue-light-500 focus-visible:ring-2 focus-visible:ring-primary-500 '
        },
        'mgp-slate': {
          solid: 'shadow-sm ring-mgp-slate-300 text-white bg-mgp-slate-500 hover:bg-mgp-slate-700 disabled:bg-mgp-slate-500 aria-disabled:bg-mgp-slate-500 focus-visible:ring-2 focus-visible:ring-primary-500 '
        },
      }
    }
  }
})

<UButton 
  :ui="{ rounded: 'rounded-full' }" 
  icon="heroicons:arrow-long-right" 
  size="2xl"
  variant="solid" 
  color="mgp-slate" 
  label="Vendre mes kilos de libre" 
  trailing 
/>

<UButton 
  :ui="{ rounded: 'rounded-full' }" 
  icon="heroicons:arrow-long-right" 
  size="2xl"
  variant="solid" 
  color="mgp-slate" 
  label="Vendre mes kilos de libre" 
  trailing 
/>

   export default defineNuxtConfig({
     vite: {
       optimizeDeps: {
         include: ['@nuxt/ui', '@nuxtjs/seo', 'swiper']
       }
     }
   })
   

   export default defineNuxtConfig({
     vite: {
       optimizeDeps: {
         include: ['@nuxt/ui', '@nuxtjs/seo', 'swiper']
       }
     }
   })
   

   export default defineNuxtConfig({
     vite: {
       build: {
         cache: true
       }
     }
   })
   

   export default defineNuxtConfig({
     vite: {
       build: {
         cache: true
       }
     }
   })
   

   node --prof nuxt start
   

   node --prof nuxt start
   

<template>
  <Swiper
    :modules="[SwiperPagination]"
    :pagination="{ 
      el: '.swiper-custom-pagination',
      clickable: true,
      renderBullet: renderBullet
    }"
    @swiper="onSwiper"
  >
    <SwiperSlide v-for="(slide, index) in slides" :key="index">
      {{ slide }}
    </SwiperSlide>

    <template #container-end>
      <div class="swiper-custom-pagination"></div>
    </template>
  </Swiper>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination as SwiperPagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';

const slides = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'];

const renderBullet = (index, className) => {
  return `<span class="${className}">${index + 1}</span>`;
};

const onSwiper = (swiper) => {
  console.log(swiper);
};
</script>

<style scoped>
.swiper-custom-pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.swiper-custom-pagination .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #000;
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
  margin: 0 5px;
}

.swiper-custom-pagination .swiper-pagination-bullet-active {
  color: #fff;
  background: #007aff;
}
</style>

<template>
  <Swiper
    :modules="[SwiperPagination]"
    :pagination="{ 
      el: '.swiper-custom-pagination',
      clickable: true,
      renderBullet: renderBullet
    }"
    @swiper="onSwiper"
  >
    <SwiperSlide v-for="(slide, index) in slides" :key="index">
      {{ slide }}
    </SwiperSlide>

    <template #container-end>
      <div class="swiper-custom-pagination"></div>
    </template>
  </Swiper>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination as SwiperPagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';

const slides = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'];

const renderBullet = (index, className) => {
  return `<span class="${className}">${index + 1}</span>`;
};

const onSwiper = (swiper) => {
  console.log(swiper);
};
</script>

<style scoped>
.swiper-custom-pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.swiper-custom-pagination .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #000;
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
  margin: 0 5px;
}

.swiper-custom-pagination .swiper-pagination-bullet-active {
  color: #fff;
  background: #007aff;
}
</style>

<template>
  <Swiper
    :modules="[SwiperPagination]"
    :pagination="{ 
      el: '.swiper-custom-pagination',
      clickable: true,
      renderBullet: renderBullet
    }"
    :observer="true"
    :observeParents="true"
    @swiper="onSwiper"
  >
    <!-- Vos slides ici -->
    <template #container-end>
      <div class="swiper-custom-pagination"></div>
    </template>
  </Swiper>
</template>

<template>
  <Swiper
    :modules="[SwiperPagination]"
    :pagination="{ 
      el: '.swiper-custom-pagination',
      clickable: true,
      renderBullet: renderBullet
    }"
    :observer="true"
    :observeParents="true"
    @swiper="onSwiper"
  >
    <!-- Vos slides ici -->
    <template #container-end>
      <div class="swiper-custom-pagination"></div>
    </template>
  </Swiper>
</template>

<script setup>
// ... autres imports et code

const onSwiper = (swiper) => {
  swiper.on('slideChange', () => {
    swiper.pagination.render();
    swiper.pagination.update();
  });
};
</script>

<script setup>
// ... autres imports et code

const onSwiper = (swiper) => {
  swiper.on('slideChange', () => {
    swiper.pagination.render();
    swiper.pagination.update();
  });
};
</script>

   <UTable :columns="columns" :rows="rows" />
   

   <UTable :columns="columns" :rows="rows" />
   

   <UBlogList>
     <UBlogPost v-for="post in posts" :key="post.id" v-bind="post" />
   </UBlogList>
   

   <UBlogList>
     <UBlogPost v-for="post in posts" :key="post.id" v-bind="post" />
   </UBlogList>
   

<template>
  <div class="flex items-center space-x-2">
    <label for="date-picker" class="text-sm font-medium text-gray-700">Date :</label>
    <UPopover :popper="{ placement: 'bottom-start' }">
      <div class="flex items-center space-x-2 cursor-pointer border rounded-md px-3 py-2 bg-white hover:bg-gray-50">
        <span class="text-sm text-gray-700">{{ formattedDate }}</span>
        <UIcon name="i-heroicons-calendar-days-20-solid" class="w-5 h-5 text-gray-400" />
        <UIcon name="i-heroicons-chevron-down-20-solid" class="w-5 h-5 text-gray-400" />
      </div>

      <template #panel="{ close }">
        <DatePicker v-model="date" @close="close" />
      </template>
    </UPopover>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { format } from 'date-fns'

const date = ref(new Date())

const formattedDate = computed(() => {
  return format(date.value, 'd MMM, yyyy')
})
</script>

<template>
  <div class="flex items-center space-x-2">
    <label for="date-picker" class="text-sm font-medium text-gray-700">Date :</label>
    <UPopover :popper="{ placement: 'bottom-start' }">
      <div class="flex items-center space-x-2 cursor-pointer border rounded-md px-3 py-2 bg-white hover:bg-gray-50">
        <span class="text-sm text-gray-700">{{ formattedDate }}</span>
        <UIcon name="i-heroicons-calendar-days-20-solid" class="w-5 h-5 text-gray-400" />
        <UIcon name="i-heroicons-chevron-down-20-solid" class="w-5 h-5 text-gray-400" />
      </div>

      <template #panel="{ close }">
        <DatePicker v-model="date" @close="close" />
      </template>
    </UPopover>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { format } from 'date-fns'

const date = ref(new Date())

const formattedDate = computed(() => {
  return format(date.value, 'd MMM, yyyy')
})
</script>

npm install --platform=win32 --arch=x64 sharp

npm install --platform=win32 --arch=x64 sharp

npm install --ignore-scripts=false --foreground-scripts --verbose sharp

npm install --ignore-scripts=false --foreground-scripts --verbose sharp

npm cache clean --force
npm install

npm cache clean --force
npm install

npm rebuild sharp

npm rebuild sharp

npm uninstall sharp
npm install sharp

npm uninstall sharp
npm install sharp

<template>
  <UPopover :popper="{ placement: 'bottom-start' }">
    <UButton :ui="{ rounded: 'rounded-full' }" color="white"
      trailing-icon="i-heroicons-chevron-down-20-solid">
      <span class="text-gray-500">Type GP</span>
      <span class="text-mgp-blue-500">{{ formattedDate }}</span>
    </UButton>

    <template #panel="{ close }">
      <USelectMenu
        v-model="selectedType"
        :options="typeOptions"
        placeholder="Sélectionnez un type GP"
        @update:model-value="handleSelection(close)"
      />
    </template>
  </UPopover>
</template>

<script setup>
import { ref } from 'vue'

const selectedType = ref(null)
const formattedDate = ref('') // Assurez-vous de définir cette variable correctement

const typeOptions = [
  { label: 'Type 1', value: 'type1' },
  { label: 'Type 2', value: 'type2' },
  { label: 'Type 3', value: 'type3' },
  // Ajoutez d'autres options selon vos besoins
]

const handleSelection = (close) => {
  // Logique à exécuter lors de la sélection
  // Par exemple, mettre à jour formattedDate ou effectuer d'autres actions
  close() // Ferme le popover après la sélection
}
</script>

<template>
  <UPopover :popper="{ placement: 'bottom-start' }">
    <UButton :ui="{ rounded: 'rounded-full' }" color="white"
      trailing-icon="i-heroicons-chevron-down-20-solid">
      <span class="text-gray-500">Type GP</span>
      <span class="text-mgp-blue-500">{{ formattedDate }}</span>
    </UButton>

    <template #panel="{ close }">
      <USelectMenu
        v-model="selectedType"
        :options="typeOptions"
        placeholder="Sélectionnez un type GP"
        @update:model-value="handleSelection(close)"
      />
    </template>
  </UPopover>
</template>

<script setup>
import { ref } from 'vue'

const selectedType = ref(null)
const formattedDate = ref('') // Assurez-vous de définir cette variable correctement

const typeOptions = [
  { label: 'Type 1', value: 'type1' },
  { label: 'Type 2', value: 'type2' },
  { label: 'Type 3', value: 'type3' },
  // Ajoutez d'autres options selon vos besoins
]

const handleSelection = (close) => {
  // Logique à exécuter lors de la sélection
  // Par exemple, mettre à jour formattedDate ou effectuer d'autres actions
  close() // Ferme le popover après la sélection
}
</script>

   <UPopover :popper="{ placement: 'bottom-start' }" class="min-w-[200px]">
   

   <UPopover :popper="{ placement: 'bottom-start' }" class="min-w-[200px]">
   

   <USelectMenu v-model="gpType" :options="typeOptions" />
   

   <USelectMenu v-model="gpType" :options="typeOptions" />
   

   <USelectMenu v-model="gpType" :options="typeOptions" class="max-h-[200px] overflow-y-auto" />
   

   <USelectMenu v-model="gpType" :options="typeOptions" class="max-h-[200px] overflow-y-auto" />
   

   const typeOptions = [
     { label: 'type1', value: 'type1' },
     { label: 'type2', value: 'type2' },
     { label: 'type3', value: 'type3' }
   ]
   

   const typeOptions = [
     { label: 'type1', value: 'type1' },
     { label: 'type2', value: 'type2' },
     { label: 'type3', value: 'type3' }
   ]
   

   <USelectMenu v-model="gpType" :options="typeOptions" searchable />
   

   <USelectMenu v-model="gpType" :options="typeOptions" searchable />
   

<template>
  <UPopover :popper="{ placement: 'bottom-start' }" class="min-w-[200px]">
    <UButton :ui="{ rounded: 'rounded-full' }" color="white"
      trailing-icon="i-heroicons-chevron-down-20-solid">
      <span class="text-gray-500">Type GP</span>
      <span class="text-mgp-blue-500">{{ gpType }}</span>
    </UButton>

    <template #panel>
      <USelectMenu 
        v-model="gpType" 
        :options="typeOptions" 
        class="max-h-[200px] overflow-y-auto"
        searchable
      />
    </template>
  </UPopover>
</template>

<script setup>
import { ref } from 'vue'

const typeOptions = [
  { label: 'type1', value: 'type1' },
  { label: 'type2', value: 'type2' },
  { label: 'type3', value: 'type3' }
]

const gpType = ref(typeOptions[0].value)
</script>

<template>
  <UPopover :popper="{ placement: 'bottom-start' }" class="min-w-[200px]">
    <UButton :ui="{ rounded: 'rounded-full' }" color="white"
      trailing-icon="i-heroicons-chevron-down-20-solid">
      <span class="text-gray-500">Type GP</span>
      <span class="text-mgp-blue-500">{{ gpType }}</span>
    </UButton>

    <template #panel>
      <USelectMenu 
        v-model="gpType" 
        :options="typeOptions" 
        class="max-h-[200px] overflow-y-auto"
        searchable
      />
    </template>
  </UPopover>
</template>

<script setup>
import { ref } from 'vue'

const typeOptions = [
  { label: 'type1', value: 'type1' },
  { label: 'type2', value: 'type2' },
  { label: 'type3', value: 'type3' }
]

const gpType = ref(typeOptions[0].value)
</script>

<UFormGroup>
  <USelect :options="typeOptions">
    <template #label>
      <span>Type GP</span>
    </template>
  </USelect>
</UFormGroup>

<UFormGroup>
  <USelect :options="typeOptions">
    <template #label>
      <span>Type GP</span>
    </template>
  </USelect>
</UFormGroup>

<UFormGroup name="typeGP" :error="errorMessage">
  <USelect :options="typeOptions" v-model="selectedType">
    <template #label>
      <span>Type GP</span>
    </template>
  </USelect>
</UFormGroup>

<UFormGroup name="typeGP" :error="errorMessage">
  <USelect :options="typeOptions" v-model="selectedType">
    <template #label>
      <span>Type GP</span>
    </template>
  </USelect>
</UFormGroup>