PageColumns^PRO

GitHub

一个响应式的多列布局系统，用于并排组织内容。

用法

PageColumns 组件在一个响应式的多列布局中显示内容。它与 PageCard 组件或任何其他元素配合良好，能从移动端的单列适应到更大屏幕上的多列。

Cloudflare Workers LaunchPad

NuxtHub 是 Cloudflare Workers Launchpad Cohort 的一部分，以确保您在 Cloudflare 网络上获得一流的体验。

在 Cloudflare 基础设施上轻松运行 Nuxt - 这太棒了！

尤雨溪

Vue.js 和 Vite 的作者

我喜欢它的精良度和集成所有必要功能的做法。NuxtHub 将 Web 框架和托管集成提升到了一个新的水平！

Igor Minar

Cloudflare 软件工程师

毫无疑问，NuxtHub 是在 Cloudflare 栈上将项目从零带到生产环境最简单的方式！

Charlie Hield

高级创意技术专家

从现在起，我找不到任何理由不使用 Nuxt 进行全栈开发了。以 Nuxt 的方式快速交付，零配置。只需插上并部署。

Israel Ortuño

VueJobs 联合创始人

只用一个命令，不到 90 秒就部署了一个包含 DB、KV、文件存储和缓存的应用，全部都在边缘运行。

Fayaz Ahmed

独立开发者

在我看来，Nuxt 正成为创业者最好的框架。NuxtHub 是 Cloudflare 服务之上的一个层，提供了廉价且快速的全栈边缘托管。

Tommy J. Vedvik

UX 开发者

我喜欢 NuxtHub 如何将 Cloudflare 工具与广泛而成熟的 Nuxt 生态系统结合、增强并简化。我迫不及待地想看到它未来如何演变和扩展！

Dario Piotrowicz

Cloudflare Web 开发者

刚使用 NuxtHub 将我的第一个网站部署到 Cloudflare。体验非常流畅！

Markus Oberlehner

Web 开发者

能够运行一个命令并在几分钟内将现有的 Nuxt 项目部署到边缘真是太神奇了！感觉就像解锁了 Cloudflare 缺失的基础设施和 UI，以一种非凡的方式增强了开发者体验。

Anthony Fu

Vue.js, Vite & Nuxt 核心团队成员

对于全栈应用，NuxtHub 和 Cloudflare 是我的首选。开发者体验令人愉悦，远超我使用过的任何其他平台。我的团队能够快速迭代，轻松构建漂亮且高性能的应用。

Jonathan Beckman

GuaranTee Time 创始人

在 YG，我们的团队最近壮大了，这意味着我们使用的所有工具都需要更多席位。将我们的托管工作流程迁移到 NuxtHub 不仅只需几分钟，而且还为我们节省了之前提供商的费用。NuxtHub 在我们的基础设施之上提供了一个出色的管理层，我们对这次迁移非常满意！

Eckhardt Dreyer

YG 主管开发者

<script setup lang="ts">
const testimonials = ref([
  {
    user: {
      name: 'Evan You',
      description: 'Author of Vue.js and Vite',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/499550?v=4',
        alt: 'Evan You'
      }
    },
    quote: 'Nuxt on Cloudflare infra with minimal effort - this is huge!'
  },
  {
    user: {
      name: 'Igor Minar',
      description: 'Software Engineer at Cloudflare',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/216296?v=4',
        alt: 'Igor Minar'
      }
    },
    quote: 'I love the polish and the batteries-included approach. NuxtHub takes web framework and hosting integration to a new level!'
  },
  {
    user: {
      name: 'Charlie Hield',
      description: 'Senior Creative Technologist',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/527849?v=4',
        alt: 'Charlie Hield'
      }
    },
    quote: 'NuxtHub is hands down the easiest way to get a project from zero to production on the Cloudflare stack!'
  },
  {
    user: {
      name: 'Israel Ortuño',
      description: 'Co-founder of VueJobs',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/1769417?v=4',
        alt: 'Israel Ortuño'
      }
    },
    quote: 'I can\'t find an excuse to not go full-stack with Nuxt from now on. Ship fast the Nuxt way, zero config. Just plug & deploy.'
  },
  {
    user: {
      name: 'Fayaz Ahmed',
      description: 'Indie Hacker',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/15716057?v=4',
        alt: 'Fayaz Ahmed'
      }
    },
    quote: 'Took me less than 90 seconds to deploy an app with DB, KV, File storage and Caching, all on the edge with just a single command.'
  },
  {
    user: {
      name: 'Tommy J. Vedvik',
      description: 'UX Developer',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/48070?v=4',
        alt: 'Tommy J. Vedvik'
      }
    },
    quote: 'Nuxt is becoming the best framework for bootstrappers imo. NuxtHub is a layer on top of Cloudflare services for cheap & fast full-stack edge hosting.'
  },
  {
    user: {
      name: 'Dario Piotrowicz',
      description: 'Web Developer at Cloudflare',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/61631103?v=4',
        alt: 'Dario Piotrowicz'
      }
    },
    quote: 'I love how NuxtHub combines, amplifies and simplifies the Cloudflare tooling with the wide and mature Nuxt ecosystem. I cannot wait to see how it will evolve and expand in the future!'
  },
  {
    user: {
      name: 'Markus Oberlehner',
      description: 'Web Developer',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/6883314?v=4',
        alt: 'Markus Oberlehner'
      }
    },
    quote: 'Just deployed my first site to Cloudflare using NuxtHub. Very sleek experience!'
  },
  {
    user: {
      name: 'Anthony Fu',
      description: 'Core team Vue.js, Vite & Nuxt',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/11247099?v=4',
        alt: 'Anthony Fu'
      }
    },
    quote: 'It\'s amazing to be able to run a single command and get existing Nuxt project deployed on edge within minutes! It felt like unlocking the missing infrastructure and UI for Cloudflare, enhancing the developer experience in such an extraordinary way.'
  },
  {
    user: {
      name: 'Jonathan Beckman',
      description: 'Founder of GuaranTee Time',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/90707158?v=4',
        alt: 'Jonathan Beckman'
      }
    },
    quote: 'NuxtHub and Cloudflare are my go to for full stack apps. The DX is joyous and far superior to any other platform I\'ve used. My team is able to iterate quickly, and build beautiful, performant apps with ease.'
  },
  {
    user: {
      name: 'Eckhardt Dreyer',
      description: 'Lead Developer at YG',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/37825447?v=4',
        alt: 'Eckhardt Dreyer'
      }
    },
    quote: 'At YG, our team recently grew and that meant more seats on all the tools we use. Migrating our hosting workflow to NuxtHub not only took just a few minutes but saved us money from our previous provider. NuxtHub provides an excellent management layer on top of our infrastructure and we\'re super happy about the move!'
  }
])
</script>

<template>
  <UPageColumns>
    <UPageCard
      variant="solid"
      to="https://cloudflare.com"
      icon="i-logos-cloudflare-icon"
      title="Cloudflare's Workers LaunchPad"
      description="NuxtHub is part of the Cloudflare's Workers Launchpad Cohort to make sure you get a first-class experience on top of Cloudflare's network."
      :ui="{ leadingIcon: 'size-10' }"
    />

    <UPageCard
      v-for="(testimonial, index) in testimonials"
      :key="index"
      variant="subtle"
      :description="testimonial.quote"
      :ui="{ description: 'before:content-[open-quote] after:content-[close-quote]' }"
    >
      <template #footer>
        <UUser v-bind="testimonial.user" size="xl" />
      </template>
    </UPageCard>
  </UPageColumns>
</template>

API

Props

Prop	默认值	类型
`as`	`'div'`	`any` 此组件应渲染为的元素或组件。

插槽

插槽	类型
`default`	`{}`

主题

app.config.ts

export default defineAppConfig({
  uiPro: {
    pageColumns: {
      base: 'relative column-1 md:columns-2 lg:columns-3 gap-8 space-y-8 *:break-inside-avoid-column *:will-change-transform'
    }
  }
})

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    ui({
      uiPro: {
        pageColumns: {
          base: 'relative column-1 md:columns-2 lg:columns-3 gap-8 space-y-8 *:break-inside-avoid-column *:will-change-transform'
        }
      }
    })
  ]
})

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        pageColumns: {
          base: 'relative column-1 md:columns-2 lg:columns-3 gap-8 space-y-8 *:break-inside-avoid-column *:will-change-transform'
        }
      }
    })
  ]
})

PageCard

一个预设样式的卡片组件，用于显示标题、描述和可选链接。

PageCTA

一个用于在页面中显示的行动号召部分。

PageColumnsPRO

用法

API

Props

插槽

主题

PageColumns^PRO