Vue
Use the Opinly SDK in any Vue 3 app — no Nuxt required.
@opinly/vue is a plain Vue 3 renderer. Use it in a Vite + Vue app, or anywhere Vue runs. (On
Nuxt, add @opinly/nuxt for the useHead() SEO helper.)
Install
pnpm add @opinly/backend @opinly/vuenpm i @opinly/backend @opinly/vueyarn add @opinly/backend @opinly/vueFetch + render
Fetch server-side (or in your SSR data layer) to keep the API key private, then render with
<OpinlyContent>.
<script setup lang="ts">
import { createOpinlyClient } from '@opinly/backend'
import { OpinlyContent } from '@opinly/vue'
import type { OpinlyNode } from '@opinly/shared'
const config = { imagesPrefix: '/images', siteUrl: 'https://acme.com', blogPrefix: '/blog' }
// `site` tells Opinly where your posts are published, so it can report how each
// one is doing. Reads OPINLY_API_KEY from the environment.
const opinly = createOpinlyClient({ site: config })
const post = await opinly.post('my-post') // FullPost | null
</script>
<template>
<article v-if="post">
<h1>{{ post.title }}</h1>
<OpinlyContent :content="post.content as OpinlyNode" :config="config" />
</article>
</template><OpinlyContent> takes content, config, and an optional classNames. It renders Vue vnodes
via h(). See Rendering for node coverage and styling.
SEO
Use @opinly/shared's neutral builders (buildMetadata, buildBlogPostingJsonLd) with your
head management of choice (@vueuse/head, useHead, etc.). See SEO.