So, to simplify my problem, i want to make a personal blog site with nuxtjs, i want to get the postPreview.js to show on the main screen. postPreview.js
export default [
{
"id": "0",
"title": "DEV LOG #0",
"image": "/download.jpeg",
"excerpt": "puta que pariu conseguiu"
}
];
the id, title and excerpt are fetched correctly except the image.
My blogPost.vue
<template>
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div v-for="post in posts" :key="post.id" class="bg-white shadow-lg rounded-lg overflow-hidden">
<NuxtLink :to="`/blogPage/${post.id}`" class="block hover:opacity-90">
<NuxtImg :src="post.image"/>
<div class="p-4">
<h2 class="text-xl font-semibold mb-2">{{ post.title }}</h2>
<p class="text-gray-600 mb-4">{{ post.excerpt }}</p>
</div>
</NuxtLink>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import dataPreview from '../static/postPreviewData/postPreview'
interface Post {
id: number;
title: string;
excerpt: string;
image: string;
}
const posts = ref<Post[]>([]);
onMounted(() => {
console.log('postData:', dataPreview);
posts.value = dataPreview;
});
</script>
<style>
</style>
i have a [id].vue without any code
i tried creating a /static/ folder with chatgpt, but didnt work, only the postPreview.js was fetched correctly. the path to the images are /static/download.jpeg
i tried moving the images to /static, /public and /assets
this is the most recent code that i used with chatgpt and other AI to resolve this problem if you want more informations about the project feel free to ask!!! :)
I researched a lot and discovered that it needs a @nuxt/content library installed, but it got a few version problems
update:to be seriously, just use the default vue project without @nuxt, much easier if you want a simple blog page!