# @pantheon-systems/pcc-vue-sdk

> Pantheon Content Cloud Vue SDK

Latest version **3.8.0-beta.0** (published 2024-08-06) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @pantheon-systems/pcc-vue-sdk
pnpm add @pantheon-systems/pcc-vue-sdk
yarn add @pantheon-systems/pcc-vue-sdk
bun add @pantheon-systems/pcc-vue-sdk
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.8.0-beta.0 |
| Published | 2024-08-06 |
| First published | 2023-08-31 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18.0.0 |
| Dependencies | 15 |
| Unpacked size | 312 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | @pantheon-systems |
| Maintainers | mel-miller, cat.kaethler, zzyou, cobypear, backlineint, pantheon-npm |

## Links

- npm: https://www.npmjs.com/package/@pantheon-systems/pcc-vue-sdk
- npm.io page: https://npm.io/package/@pantheon-systems/pcc-vue-sdk

## Dependencies (15)

- [graphql](https://npm.io/package/graphql.md) ^16.8.1
- [unified](https://npm.io/package/unified.md) ^11.0.4
- [vue-demi](https://npm.io/package/vue-demi.md) ^0.14.7
- [rehype-raw](https://npm.io/package/rehype-raw.md) ^6.1.1
- [floating-vue](https://npm.io/package/floating-vue.md) ^5.2.2
- [query-string](https://npm.io/package/query-string.md) ^8.2.0
- [remark-parse](https://npm.io/package/remark-parse.md) ^11.0.0
- [remark-rehype](https://npm.io/package/remark-rehype.md) ^11.1.0
- [@apollo/client](https://npm.io/package/@apollo/client.md) ^3.10.3
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^5.0.0
- [remark-heading-id](https://npm.io/package/remark-heading-id.md) ^1.0.1
- [html-url-attributes](https://npm.io/package/html-url-attributes.md) ^3.0.0
- [@vue/apollo-composable](https://npm.io/package/@vue/apollo-composable.md) 4.0.0-beta.12
- [hast-util-to-jsx-runtime](https://npm.io/package/hast-util-to-jsx-runtime.md) ^2.3.0
- [@pantheon-systems/pcc-sdk-core](https://npm.io/package/@pantheon-systems/pcc-sdk-core.md) 3.8.0-beta.0

## Recent versions

- 3.8.0-beta.0 (latest) — 2024-08-06
- 3.7.0 — 2024-07-16
- 3.6.2-next.0 — 2024-07-15
- 3.7.0-next.0 — 2024-07-08
- 3.6.2-beta.0 — 2024-07-02
- 3.6.1-beta.0 — 2024-06-24
- 3.6.1 — 2024-06-24
- 3.6.1-next.0 — 2024-06-17
- 3.6.0 — 2024-06-05
- 3.6.0-beta.3 — 2024-06-03
- 3.6.0-beta.2 — 2024-06-03
- 3.6.0-beta.1 — 2024-06-03
- 3.6.0-beta.0 — 2024-05-28
- 3.5.4-beta.0 — 2024-05-23
- 3.5.3 — 2024-05-23
- … 42 more at https://npm.io/package/@pantheon-systems/pcc-vue-sdk/versions

## README

<div align="center">
	<h1>Pantheon Content Cloud SDK for Vue.js</h1>
	<p>
		<b>A simple and easy to use Vue client for the Pantheon Content Cloud API</b>
	</p>
	<br>
</div>

## Installation

```console
npm install @pantheon-systems/pcc-vue-sdk
```

## Setup

Initialize the Pantheon Content Cloud plugin with your PCC instance URL and site
identifier.

```javascript
import { pccPlugin } from "@pantheon-systems/pcc-vue-sdk";

createApp(App)
  // Install the plugin
  .use(pccPlugin, {
    siteId: import.meta.env.VITE_PCC_SITE_ID, // PCC Site Id; required
    token: import.meta.env.VITE_PCC_TOKEN, // PCC Token; required
  })
  .mount("#app");
```

## Usage

This package exports composables and helper components to get you up and running
with the Pantheon Content Cloud API.

### Components

#### Article Renderer

The `<ArticleRenderer />` component will render the article received from
Content Cloud by converting the raw article data into HTML elements you can
style and render in your app.

```vue
<script setup>
import { useArticle } from "@pantheon-systems/pcc-vue-sdk";
import { ArticleRenderer } from "@pantheon-systems/pcc-vue-sdk/components";

// Import the default styles
import "@pantheon-systems/pcc-vue-sdk/components/style.css";

const { id } = defineProps({
  id: {
    type: String,
    required: true,
  },
});

const { result, loading, error } = useArticle(id);
</script>

<template>
  <div v-if="loading">Loading...</div>
  <div v-if="error">{{ error }}</div>
  <div v-if="result">
    <h1>{{ result.article.title }}</h1>
    <ArticleRenderer :article="result.article" />
  </div>
</template>
```

### Composables

All composables use the [`Vue Apollo` library](https://v4.apollo.vuejs.org/)
under the hood and return the same `result`, `loading`, `error` refs among
[other properties](https://v4.apollo.vuejs.org/api/use-query.html#return).

#### useArticle

Fetch an article by ID.

```vue
<script setup>
import { useArticle } from "@pantheon-systems/pcc-vue-sdk";
import { ArticleRenderer } from "@pantheon-systems/pcc-vue-sdk/components";

// Import the default styles
import "@pantheon-systems/pcc-vue-sdk/components/style.css";

const { id } = defineProps({
  id: {
    type: String,
    required: true,
  },
});

const { result, loading, error } = useArticle(id);
</script>

<template>
  <div v-if="loading">Loading...</div>
  <div v-if="error">{{ error }}</div>
  <div v-if="result">
    <h1>{{ result.article.title }}</h1>
    <ArticleRenderer :article="result.article" />
  </div>
</template>
```

#### useArticles

Fetch a list of available articles. This query does not include the article
content.

```vue
<script setup>
import { useArticles } from "@pantheon-systems/pcc-vue-sdk";

const { id } = defineProps({
  id: {
    type: String,
    required: true,
  },
});

const { result, loading, error } = useArticle(id);
</script>

<template>
  <div v-if="loading">Loading...</div>
  <div v-if="error">{{ error }}</div>
  <template v-if="result">
    <div v-for="article in result.articles" :key="article.id">
      <h1>{{ article.title }}</h1>
      <p>{{ article.tags.join(", ") }}</p>
    </div>
  </template>
</template>
```

---
_Source: https://npm.io/package/@pantheon-systems/pcc-vue-sdk · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._