Using BCMS with Vite

BCMS works seamlessly with Vite, enabling lightning-fast local development and a clean module-based setup. Below is a minimal Vite + Vue 3 project configured to fetch content from BCMS.

1. Install Dependencies

Start with a fresh Vite + Vue 3 + TypeScript setup:

npm create vite@latest vite-project -- --template vue-ts
cd vite-project
npm install

Then install the required BCMS packages:

npm install @thebcms/client @thebcms/types @thebcms/utils

2. Update `package.json`

Here’s what your package.json should look like after setup:

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@thebcms/client": "^1.4.1",
    "@thebcms/types": "^1.3.0",
    "@thebcms/utils": "^1.1.0",
    "vue": "^3.5.12"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.1.4",
    "typescript": "~5.6.2",
    "vite": "^5.4.10",
    "vue-tsc": "^2.1.8"
  }
}

3. Initialize the App

`main.ts`

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

4. Fetch Content from BCMS

`App.vue`

<script setup lang="ts">
import { Client } from '@thebcms/client';
import type { EntryParsed } from '@thebcms/types';
import { ref, onMounted } from 'vue';

const bcms = new Client(
  'your-bcms-api-key',
  'your-bcms-user-id',
  {
    id: 'your-bcms-access-token-id',
    secret: 'your-bcms-access-token-secret',
  }
);

const entry = ref<EntryParsed>();

onMounted(async () => {
  try {
    entry.value = await bcms.entry.getBySlug('my-first-blog', 'blog');
  } catch {
    entry.value = undefined;
  }
});
</script>

<template>
  <pre>{{ entry }}</pre>
</template>

5. Run the Project

npm run dev

Open your browser at http://localhost:5173 to see the result.

Optional: Strip Out Vue

If you prefer not to use Vue at all, you can still use Vite with plain HTML + JS:

Remove Vue dependencies.
Create an index.html with a <script type="module"> that uses @thebcms/client.
Use document.getElementById() and innerHTML to display your content.

Happy coding!

PreviousSvelte

NextOther