### Install Polaris Vue with npm or yarn

Source: https://github.com/ownego/polaris-vue/blob/master/docs/documentation.md

Install the Polaris Vue library using either npm or yarn package managers. This is the first step to integrating the component library into your Vue 3 project.

```bash
npm install @ownego/polaris-vue
```

```bash
yarn add @ownego/polaris-vue
```

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

### Use Polaris Vue as a plugin in main.js

Source: https://github.com/ownego/polaris-vue/blob/master/docs/documentation.md

Integrate Polaris Vue into your Vue 3 application by installing it as a global plugin in your main JavaScript entry file (e.g., main.js). This makes all components globally available. Remember to import the necessary CSS.

```javascript
import { createApp } from 'vue'
import PolarisVue from '@ownego/polaris-vue' // [!code ++]
import App from './App.vue'
// This css import line will be deprecated once Vue 3 supports css injections.
import '@ownego/polaris-vue/dist/style.css' // [!code ++]

//...
const app = createApp(App)
app.use(PolarisVue) // [!code ++]
...
```

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

### Initialize MarkdownIt for Vue

Source: https://github.com/ownego/polaris-vue/blob/master/docs/category/[category].md

This snippet shows how to import and initialize the MarkdownIt library within a Vue 3 setup script. MarkdownIt is used here to render markdown content, likely from frontmatter or other sources, into HTML for display within the Vue component. No external dependencies beyond the markdown-it package are explicitly shown.

```vue
<script setup>
import MarkdownIt from 'markdown-it'

const md = new MarkdownIt()
</script>
```

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

### Basic Polaris Vue Setup with AppProvider

Source: https://context7.com/ownego/polaris-vue/llms.txt

Demonstrates a basic setup for a Vue.js application using Polaris Vue. It involves importing and using the AppProvider component along with other UI components like Page, Card, and Text. This setup is essential for providing the necessary context and styling for Polaris components.

```vue
<template>
  <AppProvider>
    <Page title="My Shopify App">
      <Card>
        <Text as="p">Your app content here</Text>
      </Card>
    </Page>
  </AppProvider>
</template>

<script setup lang="ts">
import { AppProvider, Page, Card, Text } from '@ownego/polaris-vue';
</script>
```

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

### Setup Polaris Vue plugin for Nuxt 3 (client-side)

Source: https://github.com/ownego/polaris-vue/blob/master/docs/documentation.md

Configure Polaris Vue for Nuxt 3 by creating a client-side plugin (e.g., `polaris.client.ts`) that registers the library with the Nuxt application. This ensures proper integration, especially in non-SSR modes.

```typescript
import PolarisVue from "@ownego/polaris-vue";
import "@ownego/polaris-vue/dist/style.css";

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(PolarisVue);
});
```

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

### Use Polaris Vue as a component library

Source: https://github.com/ownego/polaris-vue/blob/master/docs/documentation.md

Import specific components from Polaris Vue directly into your Vue components. This approach is useful when you only need a subset of the library's components.

```vue
<script setup>
import { List, Icon } from '@ownego/polaris-vue';
</script>
```

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

### Monochrome Link Example

Source: https://github.com/ownego/polaris-vue/blob/master/docs/components/Link/README.md

Shows how to use monochrome links, which adopt the color of the surrounding text. This is useful for links that should blend seamlessly with the content.

```vue
<template>
  <p>
    Learn more about <Link monochrome url="#">Fraud Protect</Link>.
  </p>
</template>

<script>
import { Link } from '@shopify/polaris-vue';

export default {
  components: {
    Link
  }
};
</script>
```

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

### Link with Underline for Inline Content Example

Source: https://github.com/ownego/polaris-vue/blob/master/docs/components/Link/README.md

Shows the recommended usage of underlines for links within inline content to clearly indicate interactivity.

```vue
<template>
  <p>
    Learn more about <Link>Fraud Protect</Link>.
  </p>
</template>

<script>
import { Link } from '@shopify/polaris-vue';

export default {
  components: {
    Link
  }
};
</script>
```

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

### Wrap App with AppProvider in Vue

Source: https://github.com/ownego/polaris-vue/blob/master/docs/documentation.md

The AppProvider component is mandatory for Polaris Vue components to function correctly. Wrap the root of your application with AppProvider and pass the required `i18n` prop with locales.

```vue
<template>
  <AppProvider :i18n="locales">
    ...
    <router-view />
  </AppProvider>
</template>
<script setup>
import locales from '@ownego/polaris-vue/dist/locales/en.json';
</script>
```

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

### Default Tooltip Example (Vue)

Source: https://github.com/ownego/polaris-vue/blob/master/docs/components/Tooltip/README.md

Demonstrates the basic usage of the Tooltip component. This example shows a simple tooltip that appears when hovering over an element, providing supplemental information.

```Vue
<template>
  <div>
    <polaris-tooltip>
      <template #activator>
        <polaris-button>Hover me</polaris-button>
      </template>
      This is a default tooltip.
    </polaris-tooltip>
  </div>
</template>

<script>
import PolarisTooltip from '@polaris/components/Tooltip';
import PolarisButton from '@polaris/components/Button';

export default {
  components: {
    PolarisTooltip,
    PolarisButton
  }
};
</script>
```

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

### Polaris Vue Setup with Internationalization

Source: https://context7.com/ownego/polaris-vue/llms.txt

Illustrates how to set up Polaris Vue with internationalization (i18n) support. This involves passing an `i18n` prop to the `AppProvider` component with translated strings for various Polaris components and features. The example also shows the usage of ResourceList and Avatar components.

```vue
<template>
  <AppProvider :i18n="i18n">
    <Page>
      <ResourceList :items="items" show-header>
        <ResourceItem
          v-for="item in items"
          :key="item.id"
          :id="item.id"
          :url="item.url"
        >
          <Text variant="bodyMd" font-weight="bold" as="h3">{{ item.name }}</Text>
          <div>{{ item.location }}</div>

          <template #media>
            <Avatar customer size="md" :name="item.name" />
          </template>
        </ResourceItem>
      </ResourceList>
    </Page>
  </AppProvider>
</template>

<script setup lang="ts">
import { AppProvider, Page, ResourceList, ResourceItem, Text, Avatar } from '@ownego/polaris-vue';

const i18n = {
  Polaris: {
    ResourceList: {
      sortingLabel: 'Sort by',
      defaultItemSingular: 'item',
      defaultItemPlural: 'items',
      showing: 'Showing {itemsCount} {resource}',
      Item: {
        viewItem: 'View details for {itemName}',
      },
    },
    Common: {
      checkbox: 'checkbox',
    },
  },
};

const items = [
  {
    id: '341',
    url: '#',
    name: 'Mae Jemison',
    location: 'Decatur, USA',
  },
  {
    id: '256',
    url: '#',
    name: 'Ellen Ochoa',
    location: 'Los Angeles, USA',
  },
];
</script>
```

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

### External Link Example

Source: https://github.com/ownego/polaris-vue/blob/master/docs/components/Link/README.md

Illustrates the usage of external links, which are designed to open in a new browser tab. Use these sparingly for links that navigate outside the current workflow or admin.

```vue
<template>
  <Link url="https://example.com" external>
    Visit our website
  </Link>
</template>

<script>
import { Link } from '@shopify/polaris-vue';

export default {
  components: {
    Link
  }
};
</script>
```

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

### Displaying a single keyboard key shortcut

Source: https://github.com/ownego/polaris-vue/blob/master/docs/components/KeyboardKey/README.md

This example demonstrates how to use the KeyboardKey component to display a single keyboard shortcut. It's often used within instructional text to indicate a key press.

```jsx
Press the <KeyboardKey>Ctrl</KeyboardKey> key.
```

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

### Configure Vite for Vue Deduplication

Source: https://github.com/ownego/polaris-vue/blob/master/docs/documentation.md

To prevent runtime errors related to multiple Vue instances, configure your Vite build tool to deduplicate the 'vue' package. Add `dedupe: ['vue']` to the `resolve` options in your `vite.config.ts` file.

```javascript
export default defineConfig({
  resolve: {
    ...
    dedupe: ['vue'],
  },
  ...
});
```

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

### Default Link Example

Source: https://github.com/ownego/polaris-vue/blob/master/docs/components/Link/README.md

Demonstrates the default usage of the Link component, suitable for text links within paragraphs or standalone text. These links open in the same browser tab by default.

```vue
<template>
  <Link url="#">Learn more</Link>
</template>

<script>
import { Link } from '@shopify/polaris-vue';

export default {
  components: {
    Link
  }
};
</script>
```

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

### Vue Card Component Examples

Source: https://context7.com/ownego/polaris-vue/llms.txt

Showcases the Card component for organizing content. Examples include a basic card, a card with sections for structured content, and a card with actions like buttons. Dependencies include various Polaris-Vue components like Card, Text, Button, BlockStack, and InlineStack.

```vue
<template>
  <div>
    <!-- Basic card -->
    <Card>
      <Text as="h2" variant="bodyMd">
        Content inside a card
      </Text>
    </Card>

    <!-- Card with sections -->
    <Card>
      <BlockStack gap="400">
        <Text as="h2" variant="headingSm">Online store dashboard</Text>
        <Text as="p" variant="bodyMd">
          View a summary of your online store's performance.
        </Text>
      </BlockStack>
    </Card>

    <!-- Card with actions -->
    <Card roundedAbove="sm">
      <BlockStack gap="400">
        <InlineStack align="space-between">
          <Text as="h2" variant="headingSm">Products</Text>
          <Button variant="plain" @click="handleViewAll">
            View all
          </Button>
        </InlineStack>
        <Text as="p" variant="bodyMd">
          Manage your product inventory and pricing.
        </Text>
      </BlockStack>
    </Card>
  </div>
</template>

<script setup lang="ts">
import { Card, Text, Button, BlockStack, InlineStack } from '@ownego/polaris-vue';

const handleViewAll = () => {
  console.log('View all clicked');
};
</script>
```

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

### Vue Text Component Examples

Source: https://github.com/ownego/polaris-vue/blob/master/docs/components/Text/README.md

Demonstrates the usage of the Text component for various typographic purposes, including headings, body text, alignment, font weight, tone, and decoration. It assumes the Text component is globally available or imported.

```vue
<template>
  <div>
    <Text variant="heading3xl">Extra Large Heading</Text>
    <Text variant="bodyLg" as="p">This is large body text.</Text>
    <Text alignment="center">Centered text.</Text>
    <Text fontWeight="bold">Bold text.</Text>
    <Text tone="subdued">Subdued text.</Text>
    <Text decoration="underline">Underlined text.</Text>
  </div>
</template>

<script>
import { Text } from '@shopify/polaris-vue';

export default {
  components: {
    Text
  }
}
</script>
```

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

### Configure tsconfig.json to skip library checks

Source: https://github.com/ownego/polaris-vue/blob/master/docs/documentation.md

To avoid potential issues with missing declaration types in third-party libraries like Polaris Vue, add `"skipLibCheck": true` to the `compilerOptions` in your `tsconfig.json` file. This allows the build process to continue without errors.

```json
{
  "compilerOptions": {
    "skipLibCheck": true
  }
}
```

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

### Install Polaris Vue using NPM or Yarn

Source: https://context7.com/ownego/polaris-vue/llms.txt

Installs the Polaris Vue library using either the NPM or Yarn package manager. This is the first step to integrating Polaris Vue components into your Vue.js project.

```bash
# Via NPM
npm install @ownego/polaris-vue

# Via Yarn
yarn add @ownego/polaris-vue
```

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

### Card with All Elements - Vue

Source: https://github.com/ownego/polaris-vue/blob/master/docs/components/Card/README.md

Presents a comprehensive example of a Polaris Vue card incorporating various components, including sections, subsections, headers, and actions. This serves as a guide for building complex card layouts by integrating multiple elements.

```vue
<template>
  <polaris-card>
    <template #header>
      <span>Card Header</span>
    </template>
    <template #headerActions>
      <polaris-button icon="SettingsMinor" aria-label="Settings" />
    </template>
    <polaris-card-section title="Main Content">
      <p>This is the primary content of the card.</p>
      <polaris-card-subsection title="Details">
        <p>More detailed information here.</p>
      </polaris-card-subsection>
      <template #actions>
        <polaris-button>View Details</polaris-button>
      </template>
    </polaris-card-section>
    <polaris-card-section subdued title="Inactive Section">
      <p>This section contains inactive content.</p>
    </polaris-card-section>
    <template #footerActions>
      <polaris-button destructive>Remove</polaris-button>
      <polaris-button>Save</polaris-button>
    </template>
  </polaris-card>
</template>

<script>
import PolarisCard from '@polaris/components/Card.vue';
import PolarisCardSection from '@polaris/components/Card/Section.vue';
import PolarisCardSubsection from '@polaris/components/Card/Subsection.vue';
import PolarisButton from '@polaris/components/Button.vue';

export default {
  components: {
    PolarisCard,
    PolarisCardSection,
    PolarisCardSubsection,
    PolarisButton
  }
}
</script>
```

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

### Migrate DisplayText to Text Vue

Source: https://github.com/ownego/polaris-vue/blob/master/docs/components/Text/README.md

Provides code examples for migrating from the deprecated `DisplayText` component to the `Text` component in Vue. It shows the corresponding `Text` component variant and `as` prop for different `DisplayText` sizes.

```diff
```diff
- <DisplayText size="small">Sales this year</DisplayText>
+ <Text variant="headingLg" as="p">Sales this year</Text>
```

```diff
- <DisplayText size="medium">Sales this year</DisplayText>
+ <Text variant="headingXl" as="p">Sales this year</Text>
```

```diff
- <DisplayText size="large">Sales this year</DisplayText>
+ <Text variant="heading2xl" as="p">Sales this year</Text>
```

```diff
- <DisplayText size="extraLarge">Sales this year</DisplayText>
+ <Text variant="heading3xl" as="p">Sales this year</Text>
```
```

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

### Pagination with Keyboard Navigation - Vue

Source: https://github.com/ownego/polaris-vue/blob/master/docs/components/Pagination/README.md

This example demonstrates how to attach standard keyboard shortcuts to important pagination controls, enhancing accessibility and user experience.

```vue
<template>
  <Pagination :withKeyboardNavigation="true" />
</template>

<script>
import { Pagination } from '@polaris/components';

export default {
  components: {
    Pagination,
  },
};
</script>
```

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

### Polaris Vue Button Component Examples

Source: https://context7.com/ownego/polaris-vue/llms.txt

Showcases various use cases and configurations for the Button component in Polaris Vue. This includes examples of basic buttons, primary actions, critical actions, buttons with icons, loading states, disabled states, full-width buttons, and buttons with disclosure options.

```vue
<template>
  <div>
    <!-- Basic button -->
    <Button>Add product</Button>

    <!-- Primary button -->
    <Button variant="primary">Save</Button>

    <!-- Critical action -->
    <Button variant="primary" tone="critical">Delete</Button>

    <!-- With icon -->
    <Button :icon="PlusIcon">Add item</Button>

    <!-- Loading state -->
    <Button :loading="isLoading" @click="handleSave">
      Save changes
    </Button>

    <!-- Disabled state -->
    <Button :disabled="!hasChanges">Save</Button>

    <!-- Full width -->
    <Button fullWidth>Continue</Button>

    <!-- With disclosure -->
    <Button disclosure="down">More actions</Button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Button } from '@ownego/polaris-vue';
import PlusIcon from '@shopify/polaris-icons';

const isLoading = ref(false);
const hasChanges = ref(false);

const handleSave = async () => {
  isLoading.value = true;
  try {
    await saveData();
  } finally {
    isLoading.value = false;
  }
};
</script>
```

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

### Link with Removed Underline Example

Source: https://github.com/ownego/polaris-vue/blob/master/docs/components/Link/README.md

Demonstrates how to remove the underline from a link. This is generally discouraged unless the link's interactivity is otherwise clear, such as in a list or navigation context.

```vue
<template>
  <Link removeUnderline>
    Learn more about Fraud Protect.
  </Link>
</template>

<script>
import { Link } from '@shopify/polaris-vue';

export default {
  components: {
    Link
  }
};
</script>
```

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

### Multi-Choice List Example

Source: https://github.com/ownego/polaris-vue/blob/master/docs/components/ChoiceList/README.md

Shows a choice list configuration that allows merchants to select multiple options simultaneously. Avoid using mutually exclusive options here.

```vue
<template>
  <PolarisChoiceList
    :choices='[
      { label: "Feature 1", value: "f1" },
      { label: "Feature 2", value: "f2" },
      { label: "Feature 3", value: "f3" },
    ]'
    selected='{{ ["f1", "f3"] }}'
    allowMultiple
  />
</template>

<script>
import { PolarisChoiceList } from '@shopify/polaris-vue';

export default {
  components: {
    PolarisChoiceList,
  },
};
</script>
```

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

### Migrate TextStyle Subdued to Text Vue

Source: https://github.com/ownego/polaris-vue/blob/master/docs/components/Text/README.md

Provides an example of migrating `TextStyle` with the `subdued` variation to the `Text` component in Vue. It shows using `Text` with `as="span"` and `tone="subdued"`.

```diff
```diff
- <TextStyle variation="subdued">No supplier listed</TextStyle>
+ <Text as="span" tone="subdued">No supplier listed</Text>
```
```

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

### Consistent Link Labeling Example (JSX)

Source: https://github.com/ownego/polaris-vue/blob/master/docs/components/Link/README.md

Demonstrates the correct usage of `accessibilityLabel` for ensuring links that navigate to the same content have identical descriptive text, enhancing predictability for assistive technology users. Incorrect usage would involve providing different labels for identical destinations.

```jsx
/* Somewhere in the code: */
<Link url="https://help.shopify.com/manual">fulfilling orders</Link>

/* Elsewhere in the code: */
<Link url="https://help.shopify.com/manual">fulfilling orders</Link>
```

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

### Configure tsconfig.json for Volar global component types

Source: https://github.com/ownego/polaris-vue/blob/master/docs/documentation.md

Enhance your development experience with Volar (Vue language features) by configuring global component types. Add `@ownego/polaris-vue/dist/volar` to the `types` array within `compilerOptions.types` in your `tsconfig.json`.

```json
{
  "compilerOptions": {
    "types": [
      "@ownego/polaris-vue/dist/volar"
    ]
  }
}
```

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

### Configure Nuxt 3 for Polaris Vue build

Source: https://github.com/ownego/polaris-vue/blob/master/docs/documentation.md

Update your Nuxt 3 configuration file (`nuxt.config.ts`) to transpile the `@ownego/polaris-vue` package. This is necessary to ensure correct bundling and compatibility within the Nuxt build process.

```typescript
export default defineNuxtConfig({
  ...
  build: {
    transpile: ["@ownego/polaris-vue"],
  },
  ...
});
```

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

### Vue Modal Component Example with Actions

Source: https://context7.com/ownego/polaris-vue/llms.txt

Demonstrates how to implement a modal dialog using the Polaris-Vue Modal component. It includes setting the modal's visibility, defining primary and secondary actions, and handling the close event. Dependencies include ref from Vue and Modal, Button from '@ownego/polaris-vue'.

```vue
<template>
  <Modal
    sectioned
    :open="active"
    :primary-action="primaryAction"
    :secondary-actions="secondaryActions"
    @close="active = false"
  >
    <template #activator>
      <Button @click="active = true">
        Open
      </Button>
    </template>

    <template #title>
      Reach more shoppers with Instagram product tags
    </template>

    <p>
      Use Instagram posts to share your products with millions of people.
      Let shoppers buy from your store without leaving Instagram.
    </p>
  </Modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Modal, Button } from '@ownego/polaris-vue';

const active = ref(false);

const primaryAction = {
  content: 'Add Instagram',
  onAction: () => {
    console.log('Primary action triggered');
    active.value = false;
  },
};

const secondaryActions = [
  {
    content: 'Learn more',
    onAction: () => {
      console.log('Secondary action triggered');
    },
  },
];
</script>
```

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

### Inconsistent Link Labeling Example (JSX)

Source: https://github.com/ownego/polaris-vue/blob/master/docs/components/Link/README.md

Illustrates the incorrect application of link labeling where links pointing to the same URL are given different `accessibilityLabel` text. This can confuse users of assistive technologies by making navigation less predictable. Always use the same label for identical destinations.

```jsx
/* Somewhere in the code: */
<Link url="https://help.shopify.com/manual">fulfilling orders</Link>

/* Elsewhere in the code: */
<Link url="https://help.shopify.com/manual">order fulfillment section</Link>
```

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

### External Links with Button Component

Source: https://github.com/ownego/polaris-vue/blob/master/docs/components/Button/README.md

Shows how to use the Button component to create links to external resources. It includes using the 'external' prop to open links in a new tab, adding an 'external' icon, and setting an accessibilityLabel for non-visual screen reader users.

```jsx
<Button
  accessibilityLabel="Terms and conditions (opens a new window)"
  icon={ExternalMinor}
  url="http://example.com"
  external
>
  Terms and conditions
</Button>

```

```jsx
<Button url="http://example.com" external>Terms and conditions</Button>
<Button url="http://example.com" external>
  Terms and conditions
</Button>

```

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

### Incorrect Usage of KeyboardKey Component in JSX

Source: https://github.com/ownego/polaris-vue/blob/master/docs/components/LegacyCard/README.md

This snippet illustrates an incorrect way to use the KeyboardKey component by not providing sufficient context. It should not be used alone to convey keyboard instructions.

```jsx
Use <KeyboardKey>Ctrl</KeyboardKey>
```

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

### Default Choice List Example

Source: https://github.com/ownego/polaris-vue/blob/master/docs/components/ChoiceList/README.md

Demonstrates a basic choice list where merchants can select a single option. All options are treated as mutually exclusive.

```vue
<template>
  <PolarisChoiceList
    :choices='[
      { label: "Option 1", value: "1" },
      { label: "Option 2", value: "2" },
      { label: "Option 3", value: "3" },
    ]'
    selected='{{ "2" }}'
  />
</template>

<script>
import { PolarisChoiceList } from '@shopify/polaris-vue';

export default {
  components: {
    PolarisChoiceList,
  },
};
</script>
```

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

### Vue TextField Component Examples

Source: https://context7.com/ownego/polaris-vue/llms.txt

Demonstrates the usage of the TextField component for various input scenarios. It supports labels, help text, error states, prefixes/suffixes, multiline input, and connected elements. Dependencies include Vue's ref and computed, and the TextField and Button components from '@ownego/polaris-vue'.

```vue
<template>
  <div>
    <!-- Basic text field -->
    <TextField
      label="Store name"
      v-model="storeName"
      autoComplete="off"
    />

    <!-- With help text -->
    <TextField
      label="Email"
      type="email"
      v-model="email"
      helpText="We'll use this for notifications"
      autoComplete="email"
    />

    <!-- With error -->
    <TextField
      label="Phone"
      v-model="phone"
      :error="phoneError"
      @blur="validatePhone"
    />

    <!-- With prefix and suffix -->
    <TextField
      label="Price"
      v-model="price"
      type="number"
      prefix="$"
      suffix="USD"
    />

    <!-- Multiline -->
    <TextField
      label="Description"
      v-model="description"
      multiline
      :autoSize="{ minRows: 3, maxRows: 10 }"
    />

    <!-- With connected elements -->
    <TextField
      label="Discount code"
      v-model="code"
    >
      <template #connectedRight>
        <Button>Apply</Button>
      </template>
    </TextField>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { TextField, Button } from '@ownego/polaris-vue';

const storeName = ref('Teeinblue');
const email = ref('');
const phone = ref('');
const price = ref('');
const description = ref('');
const code = ref('');

const phoneError = computed(() => {
  if (phone.value && !/^\d{10}$/.test(phone.value)) {
    return 'Please enter a valid 10-digit phone number';
  }
  return undefined;
});

const validatePhone = () => {
  // Validation logic
};
</script>
```