1.0.0 • Published 2 years ago
@byloth/vue-content v1.0.0
Vue Content 📝
A fork of @nuxt/content to backporting its functionality to standard Vue apps.
Installation
Using npm
:
npm install @byloth/vue-content --save
Using yarn
:
yarn add @byloth/vue-content
Configuration
/* main.ts */
import { createApp } from "vue";
import VueContent from "@byloth/vue-content";
export default createApp(App)
.use(VueContent)
.mount("#app");
Usage
vue-content
is designed to look for the content
folder in the project's public
directory.
Here, you can place your content files in any arrangement that you may feel comfortable with.
For example:
vue-project
├─── dist/*
├─── public/
│ ├─── content/
│ │ ├─── blog/
│ │ │ └─── articles/
│ │ │ ├─── that-time-i-fixed-the-world.md
│ │ │ └─── vue-2-vs-vue-3.md
│ │ │
│ │ ├─── posts/
│ │ │ ├─── happy-new-year.md
│ │ │ └─── hello-world.md
│ │ │
│ │ ├─── my-portfolio.md
│ │ └─── who-i-am.md
│ │
│ ├─── favicon.ico
│ └─── robots.txt
│
└─── src/
├─── components/*
├─── App.vue
└─── main.ts
Using Options API:
/* ExampleOptionsComponent.vue */
<template>
<ContentRenderer v-if="document" :value="document" />
</template>
<script>
export default {
data: () => ({ document: null }),
created: function() { this.fetchDocument(); },
methods: {
async fetchDocument() {
this.document = await this.$content.getDocument("blog/articles", "vue-2-vs-vue-3");
}
}
}
<script>
Using Composition API:
/* ExampleCompositionComponent.vue */
<template>
<ContentRenderer v-if="document" :value="document" />
</template>
<script setup>
import { ref } from "vue";
import { useContent } from "@byloth/vue-content";
const document = ref(null);
const $content = useContent();
const fetchDocument = async () => {
document.value = await $content.getDocument("who-i-am");
};
fetchDocument();
<script>
Roadmap
- Tests!
- Support for CSV content files
- Support for JSON content files
- Support for YAML content files
- Support for Highlighted code blocks
- Support for SSG (Static Site Generation)
- Support for Query builder API.
1.0.0
2 years ago