Skip to content

[Snyk] Upgrade @nuxt/ui from 2.22.1 to 3.2.0 #187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[Snyk] Upgrade @nuxt/ui from 2.22.1 to 3.2.0 #187

wants to merge 1 commit into from

Conversation

nerdy-tech-com-gitub
Copy link
Owner

@nerdy-tech-com-gitub nerdy-tech-com-gitub commented Jul 19, 2025 •
edited by sourcery-ai bot
Loading

snyk-top-banner

Snyk has created this PR to upgrade @nuxt/ui from 2.22.1 to 3.2.0.

ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.

⚠️ Warning: This PR contains major version upgrade(s), and may be a breaking change.

  • The recommended version is 26 versions ahead of your current version.

  • The recommended version was released 24 days ago.

Issues fixed by the recommended upgrade:

Issue Score Exploit Maturity
medium severity Missing Release of Resource after Effective Lifetime
SNYK-JS-INFLIGHT-6095116		 131 Proof of Concept
Release notes
Package name: @nuxt/ui

- <div class="bg-(--ui-error)">
+ <div class="bg-error">

  • Neutral Color Utilities (#3629): New utility classes for text, background, border, ring, divide and outline colors that map to our design system variables. These utilities work with opacity modifiers and automatically adapt to your color mode: https://ui.nuxt.com/getting-started/theme#neutral
- <div class="text-(--ui-text-muted)">
+ <div class="text-muted">

- <div class="border-(--ui-border)">
+ <div class="border-default">

- <div class="bg-(--ui-bg-elevated)/50">
+ <div class="bg-elevated/50">

- <div class="rounded-(--ui-radius)">
+ <div class="rounded-sm">

- <div class="rounded-[calc(var(--ui-radius)*1.5)]">
+ <div class="rounded-md">

- <div class="rounded-[calc(var(--ui-radius)*2)]">
+ <div class="rounded-lg">

These changes are fully backward compatible - existing CSS variable-based classes will continue to work while providing a more ergonomic alternative for new code.

🧩 New Components and Features

script setup lang="ts">
import type { CheckboxGroupItem, CheckboxGroupValue } from '@ nuxt/ui'

const items = ref<CheckboxGroupItem[]>(['System', 'Light', 'Dark'])
const value = ref<CheckboxGroupValue[]>(['System'])
</script>

<template>
<UCheckboxGroup v-model="value" :items="items" />
</template>

script setup lang="ts">
import type { RadioGroupItem, RadioGroupValue } from '@ nuxt/ui'

const items = ref<RadioGroupItem[]>(['System', 'Light', 'Dark'])
const value = ref<RadioGroupValue>('System')
</script>

<template>
<URadioGroup v-model="value" variant="table" :items="items" />
</template>

🌉 Inertia.js Integration

The Vue version now includes built-in support for Inertia.js. Enable it with the inertia: true option in your vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@ vitejs/plugin-vue'
import ui from '@ nuxt/ui/vite'

export default defineConfig(<span class="pl-ko...

Summary by Sourcery

Build:

  • Bump @nuxt/ui from ^2.17.0 to ^3.2.0 to address vulnerabilities and introduce the latest features

@snyk-bot
feat: upgrade @nuxt/ui from 2.22.1 to 3.2.0
a92833e 
Snyk has created this PR to upgrade @nuxt/ui from 2.22.1 to 3.2.0.

See this package in npm:
@nuxt/ui

See this project in Snyk:
https://app.snyk.io/org/nerds-github/project/8b4160ff-3510-4d06-a27b-7930a5e75719?utm_source=github&utm_medium=referral&page=upgrade-pr
@sourcery-ai Sourcery AI
Copy link

sourcery-ai bot commented Jul 19, 2025 •
edited
Loading

Reviewer's Guide

This PR bumps the @nuxt/ui dependency from v2.x to the new major v3.2.0 by updating package.json, addressing a medium-severity Snyk vulnerability and introducing the latest suite of components and fixes from the 3.x release.

Class diagram for new and updated UI components in @nuxt/ui v3.x

classDiagram
  class InputTags {
    +tags: string[]
    +addTag(tag: string)
    +removeTag(tag: string)
  }
  class Timeline {
    +events: TimelineEvent[]
    +addEvent(event: TimelineEvent)
    +removeEvent(eventId: string)
  }
  class Avatar {
    +chip: boolean
  }
  class Carousel {
    +activeDotColor: string
  }
  class CommandPalette {
    +items: CommandItem[]
    +children: CommandItem[]
  }
  class Form {
    +loading: boolean
    +fields: object
    +transform: function
  }
  class Modal {
    +actions: Slot
    +close(): void
    +afterEnter(): void
  }
  class Slideover {
    +actions: Slot
    +close(): void
    +afterEnter(): void
  }
  class Select {
    +triggerRef: Ref
    +autofocus: boolean
  }
  class SelectMenu {
    +triggerRef: Ref
    +autofocus: boolean
  }
  class Tabs {
    +triggerRef: Ref
  }
  class Table {
    +bodyTop: Slot
    +bodyBottom: Slot
  }
  class useOverlay {
    +unmount(): void
    +closeAll(): void
    +isOpen(): boolean
  }
  class CheckboxGroup {
    +items: CheckboxGroupItem[]
    +value: CheckboxGroupValue[]
    +variant: string
  }
  class RadioGroup {
    +items: RadioGroupItem[]
    +value: RadioGroupValue
    +variant: string
  }
  class Badge {
    +square: boolean
  }
  class InputNumber {
    +incrementDisabled: boolean
    +decrementDisabled: boolean
  }
  class NavigationMenu {
    +tooltip: string
    +popover: string
    +type: string
    +orientation: string
    +collapsible: boolean
  }
  class Popover {
    +anchor: Slot
  }
Loading

File-Level Changes

Change Details Files
Upgrade @nuxt/ui dependency to v3.2.0
  • Updated dependency version specifier in package.json
  • Aligned with Snyk recommendation to address vulnerability
 lyx-ui/package.json
Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@nerdy-tech-com-gitub @snyk-bot