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()
andinnerHTML
to display your content.
Happy coding!