### Copy Environment File (bash)

Source: https://github.com/vue-email/docs/blob/main/README.md

Copies the example environment file to a new file named .env. This is typically done during the initial setup to configure project variables.

```bash
cp .env.example .env
```

--------------------------------

### Install Vue Email Packages

Source: https://context7.com/vue-email/docs/llms.txt

Installs the necessary Vue Email packages, including render utilities and UI components, using pnpm. Users can install all packages at once or specific ones as needed.

```bash
# Install both render utilities and components
pnpm add @vue-email/render @vue-email/components

# Or install individually
pnpm add @vue-email/button
pnpm add @vue-email/html
pnpm add @vue-email/text
```

--------------------------------

### Install Preview Component using Package Managers

Source: https://github.com/vue-email/docs/blob/main/content/2.components/16.preview.md

Instructions for installing the '@vue-email/components' package or the individual '@vue-email/preview' package using pnpm, yarn, and npm. These commands add the necessary components to your project.

```sh
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/preview
```

```bash
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/preview
```

```bash
npm install @vue-email/components
# or get the individual package
npm install @vue-email/preview
```

--------------------------------

### Install Dependencies (bash)

Source: https://github.com/vue-email/docs/blob/main/README.md

Installs the necessary project dependencies using pnpm. This command should be run after cloning the repository.

```bash
pnpm install
```

--------------------------------

### Start Development Server (bash)

Source: https://github.com/vue-email/docs/blob/main/README.md

Starts the development server for the Vue Email project, allowing for live preview and hot-reloading during development. Uses npm.

```bash
npm run dev
```

--------------------------------

### Install @vue-email/text Component

Source: https://github.com/vue-email/docs/blob/main/content/2.components/19.text.md

Installs the Text component from the @vue-email/components package or as an individual package. Supports pnpm, yarn, and npm package managers.

```pnpm
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/text
```

```yarn
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/text
```

```npm
npm install @vue-email/components
# or get the individual package
npm install @vue-email/text
```

--------------------------------

### Install @vue-email/style Package

Source: https://github.com/vue-email/docs/blob/main/content/2.components/3.style.md

Instructions for installing the @vue-email/style package using various package managers (pnpm, yarn, npm). You can install the entire @vue-email/components package or just the individual style package.

```sh
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/style
```

```bash
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/style
```

```bash
npm install @vue-email/components
# or get the individual package
npm install @vue-email/style
```

--------------------------------

### Install @vue-email/components or @vue-email/section

Source: https://github.com/vue-email/docs/blob/main/content/2.components/17.section.md

Installs the @vue-email/components package or the individual @vue-email/section package using pnpm, yarn, or npm.

```sh
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/section
```

```bash
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/section
```

```bash
npm install @vue-email/components
# or get the individual package
npm install @vue-email/section
```

--------------------------------

### Install @vue-email/components or @vue-email/container

Source: https://github.com/vue-email/docs/blob/main/content/2.components/5.container.md

Installs the necessary @vue-email/components package or the individual @vue-email/container package using package managers like pnpm, yarn, or npm. Ensure you have Node.js and a package manager installed.

```pnpm
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/container
```

```yarn
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/container
```

```npm
npm install @vue-email/components
# or get the individual package
npm install @vue-email/container
```

--------------------------------

### Install Row Component (Package Managers)

Source: https://github.com/vue-email/docs/blob/main/content/2.components/9.row.md

Instructions for installing the @vue-email/row package or the full @vue-email/components package using pnpm, yarn, and npm.

```sh
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/row
```

```bash
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/row
```

```bash
npm install @vue-email/components
# or get the individual package
npm install @vue-email/row
```

--------------------------------

### Install @vue-email/code-block Component

Source: https://github.com/vue-email/docs/blob/main/content/2.components/6.code-block.md

Demonstrates how to install the @vue-email/code-block package using different package managers like pnpm, yarn, and npm. This component is part of the @vue-email/components library or can be installed individually.

```sh
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/code-block
```

```bash
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/code-block
```

```bash
npm install @vue-email/components
# or get the individual package
npm install @vue-email/code-block
```

--------------------------------

### Install Vue Email Heading Component

Source: https://github.com/vue-email/docs/blob/main/content/2.components/11.heading.md

Instructions for installing the '@vue-email/components' package or the individual '@vue-email/heading' package using different package managers like pnpm, yarn, and npm.

```sh
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/heading
```

```bash
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/heading
```

```bash
npm install @vue-email/components
# or get the individual package
npm install @vue-email/heading
```

--------------------------------

### Install Markdown Component (pnpm, yarn, npm)

Source: https://github.com/vue-email/docs/blob/main/content/2.components/15.markdown.md

Install the Markdown component and its dependencies using your preferred package manager (pnpm, yarn, or npm). You can install the entire '@vue-email/components' package or the individual '@vue-email/markdown' package.

```sh
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/markdown
```

```bash
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/markdown
```

```bash
npm install @vue-email/components
# or get the individual package
npm install @vue-email/markdown
```

--------------------------------

### Install Column Component with Package Managers

Source: https://github.com/vue-email/docs/blob/main/content/2.components/8.column.md

Instructions for installing the Column component, either as part of the main @vue-email/components package or as an individual package, using pnpm, yarn, and npm.

```sh
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/column
```

```bash
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/column
```

```bash
npm install @vue-email/components
# or get the individual package
npm install @vue-email/column
```

--------------------------------

### Use Vue Email Heading Component in Template

Source: https://github.com/vue-email/docs/blob/main/content/2.components/11.heading.md

A basic example demonstrating how to import and use the Heading component within a Vue.js template. It shows the necessary script setup and template structure.

```vue
<script setup lang="ts">
import { Heading } from '@vue-email/components'
</script>

<template>
  <Heading as="h2">Lorem ipsum</Heading>
</template>
```

--------------------------------

### Install @vue-email/code-inline Component

Source: https://github.com/vue-email/docs/blob/main/content/2.components/7.code-inline.md

Instructions for installing the @vue-email/code-inline package using different package managers (pnpm, yarn, npm). This component is part of the @vue-email/components library.

```pnpm
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/code-inline
```

```yarn
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/code-inline
```

```npm
npm install @vue-email/components
# or get the individual package
npm install @vue-email/code-inline
```

--------------------------------

### Install Button Component (pnpm, yarn, npm)

Source: https://github.com/vue-email/docs/blob/main/content/2.components/4.button.md

Installs the Vue Email Button component using package managers. You can install the entire components package or just the individual button package.

```pnpm
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/button
```

```yarn
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/button
```

```npm
npm install @vue-email/components
# or get the individual package
npm install @vue-email/button
```

--------------------------------

### Install Vue Email Font Component

Source: https://github.com/vue-email/docs/blob/main/content/2.components/10.font.md

Instructions for installing the @vue-email/font package or the entire @vue-email/components package using different package managers (pnpm, yarn, npm).

```sh
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/font
```

```bash
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/font
```

```bash
npm install @vue-email/components
# or get the individual package
npm install @vue-email/font
```

--------------------------------

### Vue Email Html Component Example

Source: https://context7.com/vue-email/docs/llms.txt

Demonstrates the root Html component for email templates, supporting language and direction attributes. It wraps content like Text and Button components.

```vue
<script setup lang="ts">
import { Html, Button, Text } from '@vue-email/components'

defineProps({
  message: String
})
</script>

<template>
  <Html lang="en" dir="ltr">
    <Text>{{ message }}</Text>
    <Button href="https://example.com" style="color: #61dafb">
      Get Started
    </Button>
  </Html>
</template>
```

--------------------------------

### Install @vue-email/components and @vue-email/tailwind

Source: https://github.com/vue-email/docs/blob/main/content/2.components/1.tailwind.md

Install the necessary packages for Vue Email components and Tailwind CSS integration using your preferred package manager (pnpm, yarn, or npm).

```sh
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/tailwind
```

```bash
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/tailwind
```

```bash
npm install @vue-email/components
# or get the individual package
npm install @vue-email/tailwind
```

--------------------------------

### Install Image Component - Package Managers

Source: https://github.com/vue-email/docs/blob/main/content/2.components/13.image.md

Install the @vue-email/components package or the individual @vue-email/img package using your preferred package manager (pnpm, yarn, or npm).

```sh
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/img
```

```bash
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/img
```

```bash
npm install @vue-email/components
# or get the individual package
npm install @vue-email/img
```

--------------------------------

### Basic Usage of Hr Component in Vue Template

Source: https://github.com/vue-email/docs/blob/main/content/2.components/12.hr.md

Import and use the Hr component within your Vue email template. This example demonstrates a simple setup where the Hr component is directly included in the template to render a horizontal rule.

```vue
<script setup lang="ts">
import { Hr } from '@vue-email/components'
</script>

<template>
  <Hr />
</template>
```

--------------------------------

### Install @vue-email/head and @vue-email/components

Source: https://github.com/vue-email/docs/blob/main/content/2.components/2.head.md

Install the @vue-email/head and @vue-email/components packages using your preferred package manager (pnpm, yarn, or npm). This allows you to use the Head component in your Vue email templates.

```sh
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/head
```

```bash
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/head
```

```bash
npm install @vue-email/components
# or get the individual package
npm install @vue-email/head
```

--------------------------------

### Vue Email Text Component Example

Source: https://context7.com/vue-email/docs/llms.txt

Illustrates the Text component for standard text blocks, ensuring proper email spacing. It allows for custom styling and can be used for primary or secondary text content.

```vue
<script setup lang="ts">
import { Text } from '@vue-email/components'

defineProps({
  content: String
})
</script>

<template>
  <Text>{{ content }}</Text>
  <Text style="color: #666; font-size: 14px;">
    This is a secondary text block with custom styling.
  </Text>
</template>
```

--------------------------------

### Vue Email Container Component Example

Source: https://context7.com/vue-email/docs/llms.txt

Demonstrates the Container component for centering email content with a consistent width. It's useful for structuring the main layout and can contain other elements like Text and Button.

```vue
<script setup lang="ts">
import { Container, Button, Text } from '@vue-email/components'
</script>

<template>
  <Container>
    <Text>Your content is now centered with proper email margins.</Text>
    <Button href="https://example.com" style="color: #61dafb;">
      Take Action
    </Button>
  </Container>
</template>
```

--------------------------------

### Install Vue Email Link Component

Source: https://github.com/vue-email/docs/blob/main/content/2.components/14.link.md

Installs the @vue-email/components package or the individual @vue-email/link package using different package managers like pnpm, yarn, and npm.

```sh
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/link
```

```bash
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/link
```

```bash
npm install @vue-email/components
# or get the individual package
npm install @vue-email/link
```

--------------------------------

### Install Vue Email HTML Component using package managers

Source: https://github.com/vue-email/docs/blob/main/content/2.components/1.html.md

Install the @vue-email/components or @vue-email/html package using your preferred package manager (pnpm, yarn, or npm). This component is essential for structuring email content within a Vue application.

```sh
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/html
```

```bash
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/html
```

```bash
npm install @vue-email/components
# or get the individual package
npm install @vue-email/html
```

--------------------------------

### Install Vite Vue Plugin for Nuxt/Nitro

Source: https://github.com/vue-email/docs/blob/main/content/1.getting-started/4.nuxt-nitro.md

Installs the necessary Vite Vue plugin for Nuxt and Nitro projects. This plugin enables the server-side processing of .vue files, which is crucial for email rendering in these frameworks. It is compatible with popular package managers like pnpm, yarn, and npm.

```sh
pnpm add @vitejs/plugin-vue
```

```bash
yarn add @vitejs/plugin-vue
```

```bash
npm install @vitejs/plugin-vue
```

--------------------------------

### Install Hr Component using Package Managers

Source: https://github.com/vue-email/docs/blob/main/content/2.components/12.hr.md

Install the Hr component as part of the '@vue-email/components' package or individually using pnpm, yarn, or npm. This provides the necessary module for using the Hr component in your Vue email templates.

```sh
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/hr
```

```bash
yarn add @vue-email/components
# or get the individual package
yarn add @vue-email/hr
```

```bash
npm install @vue-email/components
# or get the individual package
npm install @vue-email/hr
```

--------------------------------

### Usage Example - Vue Template

Source: https://github.com/vue-email/docs/blob/main/content/2.components/13.image.md

Add the Img component to your Vue email template. This example demonstrates importing the component and using it with src, alt, width, and height attributes. Supported image formats are png, gif, and jpg; avoid svg.

```vue
<script setup lang="ts">
import { Img } from '@vue-email/components'
</script>

<template>
  <Img src="cat.jpg" alt="Cat" width="300" height="300" />
</template>
```

--------------------------------

### Vue Font Component Usage Example

Source: https://github.com/vue-email/docs/blob/main/content/2.components/10.font.md

A Vue.js template demonstrating how to use the Font component within an email template. It highlights the importance of fallbackFontFamily for email client compatibility and shows how to specify web font details like URL and format.

```vue
<script setup lang="ts">
import { Font, Head, Html } from "@vue-email/components";
</script>

<template>
  <Html lang="en">
    <Head>
      <Font
        font-family="Roboto"
        fallback-font-family="Verdana"
        :web-font="{
          url: 'https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2',
          format: 'woff2',
        }"
        :font-weight="400"
        font-style="normal"
      />
    </Head>
  </Html>
</template>
```

--------------------------------

### Vue Email HTML Component Usage Example

Source: https://github.com/vue-email/docs/blob/main/content/2.components/1.html.md

Demonstrates how to integrate the Vue Email HTML component into a Vue template. It shows importing necessary components and using the Html component to wrap other elements like Button, specifying language and direction attributes.

```vue
<script setup lang="ts">
import { Html, Button } from '@vue-email/components'
</script>

<template>
  <Html lang="en" dir="ltr">
    <Button href="https://example.com" style="color: #61dafb">
      Click me
    </Button>
  </Html>
</template>
```

--------------------------------

### Complete Email Template Example in Vue

Source: https://context7.com/vue-email/docs/llms.txt

This Vue.js component demonstrates a full-featured transactional email template, including sections for order details, item listings, tracking information, and company branding. It utilizes various components from '@vue-email/components' for structured email content.

```vue
<script setup lang="ts">
import {
  Html,
  Head,
  Preview,
  Body,
  Container,
  Section,
  Row,
  Column,
  Heading,
  Text,
  Button,
  Img,
  Hr,
  Link
} from '@vue-email/components'

defineProps<{
  username: string
  orderNumber: string
  orderDate: string
  total: string
  items: Array<{
    name: string
    quantity: number
    price: string
    imageUrl: string
  }>
  trackingUrl: string
}>()
</script>

<template>
  <Html lang="en">
    <Head />
    <Preview>Your order #{{ orderNumber }} has been shipped</Preview>
    <Body style="background-color: #f6f9fc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
      <Container style="background-color: #ffffff; margin: 0 auto; padding: 20px; max-width: 600px;">
        <Img
          src="https://example.com/logo.png"
          alt="Company Logo"
          width="150"
          height="40"
          style="margin: 0 auto;"
        />

        <Heading as="h1" style="color: #333; text-align: center;">
          Order Shipped!
        </Heading>

        <Text style="color: #666; font-size: 16px;">
          Hi {{ username }},
        </Text>

        <Text style="color: #666; font-size: 16px;">
          Great news! Your order #{{ orderNumber }} placed on {{ orderDate }} has been shipped and is on its way.
        </Text>

        <Hr />

        <Section>
          <Row v-for="item in items" :key="item.name">
            <Column style="width: 100px;">
              <Img :src="item.imageUrl" :alt="item.name" width="80" height="80" />
            </Column>
            <Column>
              <Text style="font-weight: bold;">{{ item.name }}</Text>
              <Text style="color: #666;">Quantity: {{ item.quantity }}</Text>
              <Text style="color: #666;">Price: {{ item.price }}</Text>
            </Column>
          </Row>
        </Section>

        <Hr />

        <Text style="font-size: 18px; font-weight: bold; text-align: right;">
          Total: {{ total }}
        </Text>

        <Button
          :href="trackingUrl"
          style="background-color: #5469d4; color: white; padding: 12px 30px; text-decoration: none; border-radius: 4px; display: block; text-align: center; margin: 20px 0;"
        >
          Track Your Order
        </Button>

        <Hr />

        <Text style="color: #999; font-size: 12px; text-align: center;">
          Questions? Visit our <Link href="https://example.com/support">support center</Link> or reply to this email.
        </Text>

        <Text style="color: #999; font-size: 12px; text-align: center;">
          © 2024 Your Company. All rights reserved.
        </Text>
      </Container>
    </Body>
  </Html>
</template>

```

--------------------------------

### Vue Email Heading Component Example

Source: https://context7.com/vue-email/docs/llms.txt

Shows the Heading component for semantic headings (h1, h2, etc.) with built-in margin utilities. It helps in structuring content hierarchy within email templates.

```vue
<script setup lang="ts">
import { Heading, Text } from '@vue-email/components'
</script>

<template>
  <Heading as="h1" mt="0" mb="20px">
    Welcome to Our Platform
  </Heading>
  <Heading as="h2" my="16px">
    Getting Started Guide
  </Heading>
  <Text>Follow these steps to complete your setup...</Text>
</template>
```

--------------------------------

### Vue Email Button Component Example

Source: https://context7.com/vue-email/docs/llms.txt

Shows how to use the Button component to create styled link elements that render as buttons in emails. It supports standard link attributes like href and target, along with inline styles.

```vue
<script setup lang="ts">
import { Button } from '@vue-email/components'
</script>

<template>
  <Button
    href="https://example.com/confirm"
    target="_blank"
    style="background-color: #5469d4; color: white; padding: 12px 20px; border-radius: 4px; text-decoration: none;"
  >
    Confirm Email Address
  </Button>
</template>
```

--------------------------------

### Use Preview Component in Vue Template

Source: https://github.com/vue-email/docs/blob/main/content/2.components/16.preview.md

Example of how to import and use the Preview component within a Vue.js template. This component is used to define the text that appears in an email client's inbox preview.

```vue
<script setup lang="ts">
import { Preview } from '@vue-email/components'
</script>

<template>
  <Preview>Email preview text</Preview>
</template>
```

--------------------------------

### Create Vue Email Component

Source: https://github.com/vue-email/docs/blob/main/content/1.getting-started/3.usage.md

Define an email template using Vue components. This example demonstrates importing necessary components like Button, Hr, Html, and Text from '@vue-email/components' and structuring the email content within a template.

```vue
<script setup lang="ts">
import { Button, Hr, Html, Text } from '@vue-email/components'

defineProps({
  title: String,
})
</script>

<template>
  <Html lang="en">
    <Text>{{ title }}</Text>
    <Hr />
    <Button href="https://example.com">Click me</Button>
  </Html>
</template>
```

--------------------------------

### Use Text Component in Vue Email Template

Source: https://github.com/vue-email/docs/blob/main/content/2.components/19.text.md

Demonstrates how to import and use the Text component within a Vue.js email template. It shows basic setup with script and template tags.

```vue
<script setup lang="ts">
import { Text } from '@vue-email/components'
</script>

<template>
  <Text>Lorem ipsum</Text>
</template>
```

--------------------------------

### Vue Email Template with Column Component

Source: https://github.com/vue-email/docs/blob/main/content/2.components/8.column.md

Example of how to use the Column component within a Vue Email template. It demonstrates importing the Column and Row components and structuring content with multiple columns inside a row.

```vue
<script setup lang="ts">
import { Column, Row } from '@vue-email/components'
</script>

<template>
  <Row>
    <Column>A</Column>
    <Column>B</Column>
    <Column>C</Column>
  </Row>
</template>
```

--------------------------------

### Vue Email Template with Tailwind Component

Source: https://github.com/vue-email/docs/blob/main/content/2.components/1.tailwind.md

Example of integrating the Tailwind component into a Vue email template. It demonstrates importing the component and using it to wrap a Button with custom Tailwind classes for styling.

```vue
<script setup lang="ts">
import { Tailwind, Button } from "@vue-email/components";
</script>

<template>
  <Tailwind 
    :config="{
      theme: {
        extend: {
          colors: {
            brand: '#007291',
          },
        },
      },
    }"
  >
    <Button href="https://example.com" class="bg-brand px-3 py-2 font-medium leading-4 text-white">
      Click me
    </Button>
  </Tailwind>
</template>
```

--------------------------------

### Vue Email Row Component Basic Usage

Source: https://github.com/vue-email/docs/blob/main/content/2.components/9.row.md

Example of how to import and use the Row component within a Vue email template. It demonstrates nesting Row components inside a Section and placing Column components within each Row.

```vue
<script setup lang="ts">
import { Row, Column, Section } from "@vue-email/components";
</script>

<template>
  <Section>
    <Row>
      <Column>A</Column>
    </Row>
    <Row>
      <Column>B</Column>
    </Row>
    <Row>
      <Column>C</Column>
    </Row>
  </Section>
</template>
```

--------------------------------

### Use CodeInline Component in Vue Template

Source: https://github.com/vue-email/docs/blob/main/content/2.components/7.code-inline.md

Example of how to import and use the CodeInline component within a Vue 3 template. The component is designed to display inline code elements that render consistently across various email clients.

```vue
<script setup lang="ts">
import { CodeInline } from '@vue-email/components'
</script>

<template>
  <CodeInline>@vue-email/code-inline</CodeInline>
</template>
```

--------------------------------

### Build for Production (bash)

Source: https://github.com/vue-email/docs/blob/main/README.md

Builds the Vue Email application for production deployment. This command requires a Nuxt UI Pro license to be set in the .env file. Uses npm.

```bash
npm run generate
```

--------------------------------

### Search API Endpoint for Content in TypeScript

Source: https://context7.com/vue-email/docs/llms.txt

This TypeScript code defines a server endpoint for searching documentation content. It uses `serverQueryContent` from '#content/server' to query markdown files where navigation is enabled, returning the matching content.

```typescript
// server/api/search.json.get.ts
import { serverQueryContent } from '#content/server'

export default eventHandler(async (event) => {
  // Query all markdown content with navigation enabled
  return serverQueryContent(event)
    .where({ _type: 'markdown', navigation: { $ne: false } })
    .find()
})
```

--------------------------------

### Implement Grid Layouts with Vue Email Row and Column

Source: https://context7.com/vue-email/docs/llms.txt

The Section, Row, and Column components facilitate creating responsive grid layouts for emails. They allow you to structure content into rows and columns, enabling more complex and organized email designs.

```vue
<script setup lang="ts">
import { Section, Row, Column, Text } from '@vue-email/components'
</script>

<template>
  <Section>
    <Row>
      <Column>
        <Text>Column A</Text>
      </Column>
      <Column>
        <Text>Column B</Text>
      </Column>
      <Column>
        <Text>Column C</Text>
      </Column>
    </Row>
    <Row>
      <Column>
        <Text>Full width content in second row</Text>
      </Column>
    </Row>
  </Section>
</template>
```

--------------------------------

### Vue Email Section Component Usage

Source: https://github.com/vue-email/docs/blob/main/content/2.components/17.section.md

Demonstrates how to use the Section component in a Vue.js email template. It shows a basic Section with Text and a more complex Section formatted with Rows and Columns.

```vue
<script setup lang="ts">
import { Section, Column, Row, Text } from "@vue-email/components";
</script>

<template>
  <!-- A simple `section` -->
  <Section>
    <Text>Hello World</Text>
  </Section>

  <!-- Formatted with `rows` and `columns` -->
  <Section>
    <Row>
      <Column>Column 1, Row 1</Column>
      <Column>Column 2, Row 1</Column>
    </Row>
    <Row>
      <Column>Column 1, Row 2</Column>
      <Column>Column 2, Row 2</Column>
    </Row>
  </Section>
</template>
```

--------------------------------

### Configure Vue Email Rendering in Nuxt

Source: https://context7.com/vue-email/docs/llms.txt

This section details how to integrate Vue Email rendering into a Nuxt application. It involves configuring Nuxt's build process and setting up an API route to handle email rendering on the server-side.

```typescript
// nuxt.config.ts
import vue from '@vitejs/plugin-vue'

export default defineNuxtConfig({
  nitro: {
    rollupConfig: {
      plugins: [vue()]
    },
  },
})
```

```typescript
// server/api/send-email.post.ts
import { WelcomeEmail } from '~/emails/welcome'
import { render } from '@vue-email/render'

export default defineEventHandler(async (event) => {
  const body = await readBody(event)

  const html = await render(WelcomeEmail, {
    username: body.username,
    verificationUrl: body.verificationUrl
  }, {
    pretty: true
  })

  // Send email using your preferred service (Resend, SendGrid, etc.)
  // await emailService.send({ to: body.email, html })

  return { success: true }
})
```

--------------------------------

### Vue Email: Use Container and Button Components

Source: https://github.com/vue-email/docs/blob/main/content/2.components/5.container.md

Demonstrates how to import and use the Container and Button components from '@vue-email/components' within a Vue template. The Container centers content, and the Button is styled with a specific color.

```vue
<script setup lang="ts">
import { Container, Button } from '@vue-email/components'
</script>

<template>
  <Container>
    <Button href="https://example.com" style="color: #61dafb;">
      Click me
    </Button>
  </Container>
</template>

```

--------------------------------

### Render Vue Email Template to HTML

Source: https://context7.com/vue-email/docs/llms.txt

Converts Vue email components into an email-compatible HTML string. It takes the template component, props, and optional rendering options (like 'pretty' for formatting) as input.

```typescript
import { MyTemplate } from './email';
import { render } from '@vue-email/render';

// Render with props and options
const html = await render(MyTemplate, {
  title: 'Welcome to Our Service',
  username: 'john_doe',
  verificationUrl: 'https://example.com/verify?token=abc123'
}, {
  pretty: true,
});

console.log(html);
```

--------------------------------

### Configure Vite Vue Plugin in Nuxt/Nitro

Source: https://github.com/vue-email/docs/blob/main/content/1.getting-started/4.nuxt-nitro.md

Configures the Vite Vue plugin within the Nuxt or Nitro project's configuration file. This involves adding the plugin to the rollupConfig, allowing the framework to correctly process Vue components for server-side rendering. The configuration can be applied to either 'nuxt.config.ts' or 'nitro.config.ts'.

```ts
import vue from '@vitejs/plugin-vue'

export default defineNuxtConfig({
  nitro: {
    rollupConfig: {
      plugins: [vue()]
    },
  },
})
```

```ts
import vue from '@vitejs/plugin-vue'

export default defineNitroConfig({
  rollupConfig: {
    plugins: [
      vue()
    ]
  },
})
```

--------------------------------

### Add Style Component to Vue Email Template

Source: https://github.com/vue-email/docs/blob/main/content/2.components/3.style.md

Demonstrates how to import and use the Style component within a Vue email template. It shows how to include basic CSS rules for the body element within the Head section of the template.

```vue
<script setup lang="ts">
import { Head, Style } from '@vue-email/components'
</script>

<template>
  <Head>
    <title>Email title</title>
    <meta name="description" content="Description">
    <Style>
      body { background-color: #fff; }
    </Style>
  </Head>
</template>
```

--------------------------------

### Font Component API

Source: https://github.com/vue-email/docs/blob/main/content/2.components/10.font.md

Details and usage of the Font component for setting fonts in Vue email templates.

```APIDOC
## Vue Email Font Component

### Description
The `Font` component is used within the `<Head>` section of your email template to define font styles. It allows you to specify a primary font, a fallback font, and optionally a web font with its URL and format. This component helps ensure consistent typography across different email clients, although web font support varies.

### Usage
Import the `Font` component and include it in your `<Head>` section. Configure its props to define your desired font settings.

```vue
<script setup lang="ts">
import { Font, Head, Html } from "@vue-email/components";
</script>

<template>
  <Html lang="en">
    <Head>
      <Font
        font-family="Roboto"
        fallback-font-family="Verdana"
        :web-font="{
          url: 'https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2',
          format: 'woff2',
        }"
        :font-weight="400"
        font-style="normal"
      />
    </Head>
  </Html>
</template>
```

### Props

#### `fontFamily` (string) - Required
Specifies the primary font family to be used. If `webFont` is configured, this should be the name of that font.

#### `fallbackFontFamily` (string) - Required
Provides a fallback font family that email clients will use if web fonts are not supported or if the primary font is not available on the user's system.

#### `webFont` ({url: string, format: string} | undefined) - Optional
Defines the web font to be used by supported email clients. It requires an object with `url` (the font file URL) and `format` (e.g., 'woff2').

#### `fontWeight` (number | string) - Optional
Sets the weight of the font (e.g., 400 for normal, 700 for bold).

#### `fontStyle` (string) - Optional
Defines the style of the font (e.g., 'normal', 'italic').

### Installation

Install the component using your preferred package manager:

**pnpm:**
```sh
pnpm add @vue-email/components
# or
pnpm add @vue-email/font
```

**yarn:**
```bash
yarn add @vue-email/components
# or
yarn add @vue-email/font
```

**npm:**
```bash
npm install @vue-email/components
# or
npm install @vue-email/font
```
```

--------------------------------

### Vue Email Link Component Usage

Source: https://github.com/vue-email/docs/blob/main/content/2.components/14.link.md

Demonstrates how to import and use the Link component within a Vue 3 template. It requires importing the Link component and then using it with an 'href' prop to specify the target URL.

```vue
<script setup lang="ts">
import { Link } from '@vue-email/components'
</script>

<template>
  <Link href="https://example.com">Example</Link>
</template>
```

--------------------------------

### Use CodeBlock Component in Vue Template

Source: https://github.com/vue-email/docs/blob/main/content/2.components/6.code-block.md

Shows how to integrate the CodeBlock component into a Vue.js email template. It includes importing the component, defining the code content, and passing props like `code`, `lang`, `theme`, `showLineNumbers`, and `highlightedLines` to customize the code display.

```vue
<script setup lang="ts">
import { CodeBlock } from '@vue-email/components'

const code = `export default async (req, res) => {
  try {
    const html = await renderAsync(
      EmailTemplate({ firstName: 'John' })
    );
    return NextResponse.json({ html });
  } catch (error) {
    return NextResponse.json({ error });
  }
}`
</script>

<template>
  <CodeBlock 
    :code="code" 
    lang="typescript" 
    theme="min-dark" 
    show-line-numbers 
    :highlighted-lines="[3, 4, 5]" 
  />
</template>
```

--------------------------------

### Display Images with Vue Email Img Component

Source: https://context7.com/vue-email/docs/llms.txt

The Img component is used to display images in emails, ensuring compatibility across different email clients. It accepts standard image attributes like src, alt, width, and height, along with inline styles. Note that SVG format is not supported.

```vue
<script setup lang="ts">
import { Img, Text } from '@vue-email/components'
</script>

<template>
  <Img
    src="https://example.com/logo.png"
    alt="Company Logo"
    width="200"
    height="50"
  />
  <Img
    src="https://example.com/product.jpg"
    alt="Product Image"
    width="600"
    height="400"
    style="border-radius: 8px; margin: 20px 0;"
  />
  <Text style="font-size: 12px; color: #999;">
    Note: Use PNG, JPG, or GIF formats. SVG is not supported by most email clients.
  </Text>
</template>
```

--------------------------------

### Render Vue Email Template to Plain Text

Source: https://context7.com/vue-email/docs/llms.txt

Generates a plain text version of an email template, suitable for email clients that do not support HTML. It uses the same template component and props but with the 'plainText' option enabled.

```typescript
import { MyTemplate } from './email';
import { render } from '@vue-email/render';

// Convert to plain text with same props
const text = await render(MyTemplate, {
  title: 'Password Reset Request',
  resetLink: 'https://example.com/reset?token=xyz789'
}, {
  plainText: true,
});

console.log(text);
```

--------------------------------

### Tailwind CSS Configuration for Email Client Compatibility

Source: https://github.com/vue-email/docs/blob/main/content/2.components/1.tailwind.md

A TypeScript configuration object for Tailwind CSS designed to improve compatibility with email clients, particularly by overriding default 'rem' units with pixel-based equivalents for font sizes and spacing.

```ts
import type { TailwindConfig } from "@vue-email/tailwind";

export default {
  theme: {
    fontSize: {
      xs: ["12px", { lineHeight: "16px" }],
      sm: ["14px", { lineHeight: "20px" }],
      base: ["16px", { lineHeight: "24px" }],
      lg: ["18px", { lineHeight: "28px" }],
      xl: ["20px", { lineHeight: "28px" }],
      "2xl": ["24px", { lineHeight: "32px" }],
      "3xl": ["30px", { lineHeight: "36px" }],
      "4xl": ["36px", { lineHeight: "36px" }],
      "5xl": ["48px", { lineHeight: "1" }],
      "6xl": ["60px", { lineHeight: "1" }],
      "7xl": ["72px", { lineHeight: "1" }],
      "8xl": ["96px", { lineHeight: "1" }],
      "9xl": ["144px", { lineHeight: "1" }],
    },
    spacing: {
      px: "1px",
      0: "0",
      0.5: "2px",
      1: "4px",
      1.5: "6px",
      2: "8px",
      2.5: "10px",
      3: "12px",
      3.5: "14px",
      4: "16px",
      5: "20px",
      6: "24px",
      7: "28px",
      8: "32px",
      9: "36px",
      10: "40px",
      11: "44px",
      12: "48px",
      14: "56px",
      16: "64px",
      20: "80px",
      24: "96px",
      28: "112px",
      32: "128px",
      36: "144px",
      40: "160px",
      44: "176px",
      48: "192px",
      52: "208px",
      56: "224px",
      60: "240px",
      64: "256px",
      72: "288px",
      80: "320px",
      96: "384px",
    },
  },
} satisfies TailwindConfig;
```

--------------------------------

### Convert Vue Component to HTML

Source: https://github.com/vue-email/docs/blob/main/content/1.getting-started/3.usage.md

Render a Vue email component into an HTML string. This function takes the component and props as arguments. The 'pretty' option can be used to format the output HTML.

```ts
import { MyTemplate } from './email';
import { render } from '@vue-email/render';

const html = await render(MyTemplate,{
  title: 'some title',
},{
  pretty: true,
});

console.log(html);
```

--------------------------------

### Use Button Component in Vue Template

Source: https://github.com/vue-email/docs/blob/main/content/2.components/4.button.md

Demonstrates how to import and use the Button component within a Vue template. It requires importing the component and then using it with an `href` attribute and optional inline styles.

```vue
<script setup lang="ts">
import { Button } from '@vue-email/components'
</script>

<template>
  <Button href="https://example.com" style="color: #61dafb; padding: 10px 20px;">
    Click me
  </Button>
</template>
```

--------------------------------

### Create Hyperlinks with Vue Email Link Component

Source: https://context7.com/vue-email/docs/llms.txt

The Link component generates hyperlink elements for email navigation. It can be used to link to external URLs or to initiate email actions like sending an email. The target attribute can be used for opening links in new tabs.

```vue
<script setup lang="ts">
import { Link, Text } from '@vue-email/components'
</script>

<template>
  <Text>
    Please visit our
    <Link href="https://example.com/docs" target="_blank">
      documentation
    </Link>
    for more information.
  </Text>
  <Link href="mailto:support@example.com">
    Contact Support
  </Link>
</template>
```

--------------------------------

### Use Head Component in Vue Email Template

Source: https://github.com/vue-email/docs/blob/main/content/2.components/2.head.md

Demonstrates how to import and use the Head component within a Vue email template. The Head component is used to include elements like the email title, which are typically found in the <head> section of an HTML document.

```vue
<script setup lang="ts">
import { Head } from '@vue-email/components'
</script>

<template>
   <Head>
      <title>My email title</title>
   </Head>
</template>
```

--------------------------------

### Render Markdown in Vue Email Template

Source: https://github.com/vue-email/docs/blob/main/content/2.components/15.markdown.md

Integrate the Markdown component into your Vue email template. Import necessary components, define your Markdown content, and pass it as the 'source' prop. Custom styles can be applied to the Markdown content and its container using 'markdownCustomStyles' and 'markdownContainerStyles' props.

```vue
<script setup lang="ts">
import { Markdown, Html } from "@vue-email/components";

const md = `# Hello, World!`
</script>

<template>
  <Html lang="en" dir="ltr">
    <Markdown
      :markdown-custom-styles="{
        h1: { color: 'red' },
        h2: {
          color: 'blue',
        },
        codeInline: {
          background: 'grey',
        },
      }"
      :markdown-container-styles="{
        padding: '12px',
        border: 'solid 1px black',
      }"
      :source="md"
    />
  </Html>
</template>
```

--------------------------------

### Convert Vue Component to Plain Text

Source: https://github.com/vue-email/docs/blob/main/content/1.getting-started/3.usage.md

Generate a plain text version of a Vue email component. This is crucial for accessibility and compatibility with email clients that don't render HTML. The 'plainText' option is set to true.

```ts
import { MyTemplate } from './email';
import { render } from '@vue-email/render';

const text = await render(MyTemplate, {
  title: 'some title',
}, {
  plainText: true,
});

console.log(text);
```

--------------------------------

### Use Tailwind CSS with Vue Email Tailwind Component

Source: https://context7.com/vue-email/docs/llms.txt

The Tailwind component enables the use of Tailwind CSS classes within Vue Email templates. It requires a Tailwind configuration object to extend or override default theme settings, allowing for custom styling.

```vue
<script setup lang="ts">
import { Tailwind, Button, Text } from "@vue-email/components";
import type { TailwindConfig } from "@vue-email/tailwind";

const tailwindConfig: TailwindConfig = {
  theme: {
    extend: {
      colors: {
        brand: '#007291',
        accent: '#ff6b6b',
      },
    },
  },
};
</script>

<template>
  <Tailwind :config="tailwindConfig">
    <div class="bg-gray-100 p-8">
      <Text class="text-2xl font-bold text-brand mb-4">
        Welcome Back!
      </Text>
      <Button
        href="https://example.com"
        class="bg-brand px-6 py-3 font-medium text-white rounded"
      >
        Continue to Dashboard
      </Button>
    </div>
  </Tailwind>
</template>
```

--------------------------------

### Add Horizontal Dividers with Vue Email Hr Component

Source: https://context7.com/vue-email/docs/llms.txt

The Hr component creates a horizontal rule, commonly used as a divider between sections in an email. It accepts inline styles to customize its appearance, such as border color and margins.

```vue
<script setup lang="ts">
import { Hr, Text } from '@vue-email/components'
</script>

<template>
  <Text>Section One Content</Text>
  <Hr />
  <Text>Section Two Content</Text>
  <Hr style="border-color: #e5e7eb; margin: 24px 0;" />
  <Text>Section Three Content</Text>
</template>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.