Hi,
Is this possible to access to one of my plugin’s collection from my index.js template at the root of my plugin ?
I would like to show a preview in the panel of what will be shown in the frontend.
What sort of preview is that, I’m missing some context here. You never have direct access to your backend PHP from JavaScript. The way to go would be a custom api endpoint you can then query from your JS.
I tried with a route.
The route seems correctly set, when I go on http://localhost:8000/news.json, I see the data
But when I run it in my index.js, the value of the fetch is undefined:
panel.plugin("hugo/news", {
blocks: {
news: {
computed: {
async news() {
fetch("http://localhost:8000/news.json").then(res => {return res.json()});
}
},
template: `
<div class="news-container">
<a class="news-link" @click="open">
<div class="news-title">{{ $t('hugo.news.blueprints.blocks.title') }}</div>
<div class="news-content">{{ console.log(news) }}</div>
</a>
</div>
`,
},
},
});
Promise { <state>: "fulfilled", <value>: undefined }
I think you should use an API route, see example here: Block factory: Creating your own blocks collection | Kirby CMS
I think it’s too complicated for only a little visual upgrade.
Thank for you help
I finally came back on this.
I achieved to make what I want.
But I have a problem when I want to show image, the content file doesn’t store the url version of image only the file version (- file://MnOFdiNzaxYbFFMz) so the image won’t display
Is there a way to get the url from this in VueJS ?
Here is my code:
panel.plugin("hugo/news", {
blocks: {
news: {
data() {
return {
newsArray: []
}
},
created() {
this.apiRequests()
},
methods: {
async apiRequests() {
const page = await this.$api.get('news.json');
this.newsArray = page;
}
},
template: `
<div class="news-container">
<k-view class="k-news-view">
<a class="news-link" @click="open">
<k-header class="news-title">{{ $t('hugo.news.blueprints.blocks.title') }}</k-header>
</a>
<k-items v-if="newsArray != []" :items="newsArray" layout="cards">
<template v-slot:default="data">
<k-item
layout="cards"
:text="data.item.content.title"
:info="data.item.content.description"
:link="data.item.url"
:image="{
cover: true,
back: 'blue-200',
src: data.item.content.cover,
}"
>
</k-item>
</template>
</k-items>
<div v-else>{{ $t('hugo.news.blueprints.sections.empty') }}</div>
</k-view>
</div>
`,
},
},
});
It’s probably not the cleanest code but at least it work 
I just need to fix this image thing.
I don’t know if it exist a toFile method or something like this usable in VueJS
I found a solution to my problem.
For those who want to know, I create a new api route to get all the files in the subpage of my news page.
So I get all the files of individual new.
But the api route return a key/value array that associate each file - file://MnOFdiNzaxYbFFMz with its corresponding url.
Then I just need to get the value corresponding to each key in my VueJS template.
panel.plugin("hugo/news", {
blocks: {
news: {
data() {
return {
news: null,
files: [],
}
},
created() {
this.apiRequests()
},
methods: {
async apiRequests() {
let news = await this.$api.get('getAllNews');
let files = await this.$api.get('getAllFiles');
this.files = files;
let arrNews = Object.keys(news).slice(0, this.content.pagination);
let subNews = {};
arrNews.forEach(key => {
subNews[key] = news[key];
})
this.news = subNews;
},
},
template: `
<div class="news-container">
<k-view class="k-news-view">
<a class="news-link" @click="open">
<k-header class="news-title">{{ $t('hugo.news.blueprints.blocks.title') }}</k-header>
</a>
<k-items v-if="news != []" :items="news" layout="cards" size="small">
<template v-slot:default="data">
<k-item
layout="cards"
:text="data.item.content.title"
:info="data.item.content.description"
:link="data.item.url"
:image="{
cover: true,
back: 'blue-200',
src: files[data.item.content.cover],
}"
>
</k-item>
</template>
</k-items>
<div v-else>{{ $t('hugo.news.blueprints.sections.empty') }}</div>
</k-view>
</div>
`,
},
},
});
Kirby::plugin('hugo/news', [
'api' => [
'routes' => [
[
'pattern' => 'getAllNews',
'action' => function () {
return collection('news')->toArray();
}
],
[
'pattern' => 'getAllFiles',
'action' => function () {
$files = [];
foreach (page('news')->children() as $child) {
foreach ($child->files()->toArray() as $key => $file) {
$files["- file://" . $file['content']['uuid']] = site()->url() . '/' . $key;
}
}
return $files;
}
]
]
],
]
Definitely not the cleanest code but it work well
PS: I’m on kirby4