釋出·  

Nuxt UI v4

Nuxt UI v4 將 Nuxt UI 和 Nuxt UI Pro 統一成一個功能強大、完全免費的庫。超過 110 個元件、12 個模板以及一個全面的 Figma 工具包，所有這些都免費提供。
Benjamin Canac

Benjamin Canac

@benjamincanac

Sébastien Chopin

Sébastien Chopin

@atinux

Hugo Richard

Hugo Richard

@hugorcd__

今天，我們釋出了Nuxt UI v4，這是一個重要的里程碑，為我們的元件庫樹立了新標準。透過此次釋出，我們將 Nuxt UI 和 Nuxt UI Pro 統一成一個單一、強大且完全免費的開源庫。

這標誌著 Vue 和 Nuxt 生態系統激動人心的新篇章，這得益於NuxtLabs 加入 Vercel。我們對開源社群的共同承諾使我們能夠將每個元件，從簡單的按鈕到最先進的儀表盤側邊欄，都提供給所有人。

以前是高階產品的功能現在對所有人開放。超過 100 個元件、高階部分和生產就緒模板現在可供您使用，並統一在一個地方。

更快地構建任何東西

Nuxt UI v4 使構建現代、精美的應用程式變得輕而易舉。您可以建立複雜的介面，如登入頁面、定價頁面、文件、部落格、作品集等，而無需從頭開始。

這是因為 Nuxt UI v4 將您所需的一切統一到一個 @nuxt/ui 包中

  • 110+ 元件： 一個廣泛的庫，可用於構建從簡單網站到複雜應用程式的任何內容。
  • 12 個免費模板： 使用生產就緒的模板，在幾分鐘內啟動您的下一個專案，例如登入頁面, SaaS, 儀表盤, 文件站點, 作品集, 聊天應用程式或更新日誌.
  • 豐富內容和排版： 使用我們與 Nuxt Content 完全整合的先進散文元件，精美地渲染 Markdown 並構建內容豐富的網站。
  • Vue 和 Nuxt 相容性： 適用於任何 Vue 或 Nuxt 專案，以及Adonis等等Laravel.

整個 Pro 套件現在都屬於您。使用以前僅供付費使用者使用的強大元件，現在免費提供給所有人。

  <template>
    <UApp>
      <UHeader>
        <UNavigationMenu :items="navigation" />
        <template #right>
          <UColorModeButton />
          <UButton icon="i-simple-icons-github" />
        </template>
      </UHeader>

      <UPageHero
        title="Nuxt UI - Starter"
        description="Nuxt UI is a free and open-source UI library for Nuxt applications. Create beautiful & responsive applications in minutes."
        :links="heroLinks"
      />

      <UPageSection
        title="The freedom to build anything"
        description="Nuxt UI ships with a comprehensive set of components that cover a wide range of use-cases. Carefully crafted to reduce boilerplate code without sacrificing flexibility."
        :features="features"
      />

      <UPageSection title="Pricing">
        <UPricingPlans :plans="plans" />
      </UPageSection>

      <UPageSection>
        <UPageCTA
          title="Start with Nuxt UI today!"
          description="Nuxt UI is a free and open-source UI library for Nuxt applications."
          variant="subtle"
          :links="ctaLinks"
        />
      </UPageSection>

      <UFooter :items="footerItems" />
    </UApp>
  </template>

從設計到程式碼，無縫銜接

一個成功的專案始於一個可靠的設計系統。在 v4 中，我們免費釋出了完整的 Figma 工具包，它與整個元件庫相呼應。

擁有超過 2,000 種元件變體和設計令牌，您現在擁有一個包含所有元件以及有關結構和使用方式詳細說明的單一 Figma 入口點。設計師和開發人員從相同的全面來源工作，使協作無縫銜接，並確保設計和實現之間完美匹配。

獲取 Figma 工具包 →

升級的開發者體驗

除了新元件，v4 還為您的工作流程帶來了顯著改進。

輕鬆遷移

與 v2 到 v3 的重大更新不同，遷移到 v4 非常簡單。此版本側重於統一，而不是破壞性更改。大多陣列件的工作方式相同，您的現有程式碼將基本保持不變。

請檢視我們的遷移指南以獲取完整演練。

改進的文件

我們已經徹底修改了文件，使其更清晰、更直觀。我們重新組織了佈局，並將複雜主題拆分為專用頁面，確保您可以更快地找到所需資訊。

我們的文件現在也完全支援 AI。它由我們新的 模型上下文協議（MCP）伺服器提供支援，該伺服器允許 Cursor 等 AI 工具直接訪問元件文件和元資料。此外，我們還提供 LLMs.txt 檔案，這是一種結構化格式，可讓任何 AI 助手理解我們的元件、主題和最佳實踐。您的 AI 工具現在可以在編輯器中直接訪問我們的整個庫，獲得一流的體驗。

為下一波 AI 浪潮做好準備

我們的 AI 聊天元件現在支援 Vercel 的 AI SDK v5。新的 Chat 類和訊息格式（帶 parts）確保與最新的 AI SDK 改進相容，讓您始終處於 AI 開發的最前沿。

感謝我們的專業版使用者

我們要特別感謝所有支援 Nuxt UI Pro 的人。您的早期採用和反饋對 Nuxt UI 的發展起到了至關重要的作用。您幫助我們資助、維護和改進該專案，使我們能夠達到這個里程碑，現在我們可以向整個社群提供這些強大的工具。

您的支援使這一切成為可能。

今天就開始構建

透過使用我們任何免費模板建立新專案來開始使用 Nuxt UI v4

npm create nuxt@latest -- -t ui

或將其新增到您現有專案中

npm install @nuxt/ui@latest

未來是開放的

憑藉統一的程式碼庫和 Vercel 的支援，我們比以往任何時候都更期待突破元件開發的界限。如果沒有我們出色的社群和所有為 Nuxt UI 的發展做出貢獻的人的支援，這次釋出是不可能實現的。

我們迫不及待地想看到您創造出什麼。UI 開發的未來是自由、開放且比以往任何時候都更強大。

準備好開始了嗎？請檢視文件並加入我們的Discord 社群與其他使用 Nuxt UI 構建精彩專案的開發者交流。

← 返回部落格
Nuxt 在領英上Nuxt on BlueskyNuxt 在 X 上