Nuxt•2w ago

Content from separate repo

Using nuxt 3, how would I build a site where content (including images) is stored in a separate repo?

5 Replies

Hi @tpluscode. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Nuxt/Nitro are built on top of unstorage, which can read from various backends, including a GitHub repo. That gives you a “content from separate repo” setup without having to clone it into your Nuxt project. Unstorage has a github driver that maps files from a remote GitHub repository (read‑only).[GitHub driver] You configure it like this:

import { createStorage } from 'unstorage'
import githubDriver from 'unstorage/drivers/github'

const storage = createStorage({
  driver: githubDriver({
    repo: 'username/content-repo',
    branch: 'main',
    dir: '/content',  // folder in that repo that holds your content
    // token: 'ghp_...', // recommended to avoid GitHub rate limits
  }),
})

import { createStorage } from 'unstorage'
import githubDriver from 'unstorage/drivers/github'

const storage = createStorage({
  driver: githubDriver({
    repo: 'username/content-repo',
    branch: 'main',
    dir: '/content',  // folder in that repo that holds your content
    // token: 'ghp_...', // recommended to avoid GitHub rate limits
  }),
})

From there, you can: - Read markdown/JSON/etc. content from that repo via storage.getItem() in server routes or composables. - Store images in that repo and read them as binary (e.g. getItemRaw) and expose them via a server route, similar to how the fs driver example exposes images under /pictures/... in a Nuxt app using useStorage and a custom route.[Static files issue] However: - The knowledge sources only show how to expose files from local filesystem storage (via fs driver) through a custom Nuxt route with useStorage, not a full, concrete Nuxt 3 + github driver integration.[Static files issue; GitHub driver] - There is no step‑by‑step example in the sources that combines Nuxt 3, Nitro, and the github driver end‑to‑end. So, based on the docs you have: 1. Use the unstorage github driver pointed at your content repo for both text content and images.[GitHub driver] 2. In Nuxt/Nitro, create server routes (e.g. /content/... and /images/...) that use useStorage('<name>') to read from that GitHub‑backed storage and return the data, similar to the pictures example that reads from local uploads.[Static files issue] 3. On the client, fetch those routes (or use a composable that wraps them) to render content and <img>/<NuxtImg> tags that point to your own routes instead of direct GitHub URLs. If you need exact Nuxt 3 code wiring for github driver usage, the current knowledge sources don’t include that, so I can’t provide a complete, guaranteed‑working snippet. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@555413648382623754> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

tpluscodeOP•2w ago

@kapa.ai is he content plugin also using unstorage?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The provided knowledge sources only cover unstorage itself and how Nuxt/Nitro use it via useStorage and Nitro’s storage config, plus the github, fs, http, s3, etc. drivers.[Unstorage intro; Nuxt issue example]
They do not mention the Nuxt Content module or how it is implemented internally, nor whether it uses unstorage under the hood. Because of that, I cannot say from these sources if the content module “also uses unstorage” internally.
So: based strictly on the given docs, there is no explicit information about Nuxt Content using unstorage. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@555413648382623754> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Content from separate repo

Did you find this page helpful?