Go back to Examples

v-collections

Versoly Attributes - Advanced

v-collections attribute allows you to connect collection data to the page so it can be filtered searched and sorted. Combined with v-prerender it can be used for SEO content.

                <section class="pt-12 pb-24" v-collections="['posts', 'categories']" v-collections-init="">
    <div class="container">
        <div class="row mb-12">
            <div class="col">
                <input class="form-input" v-model="postsSearch" v-on:input="fetchFilteredData({})" type="text" placeholder="Search posts..." />
                <div class="flex flex-col gap-y-3">
                    <template v-for="post in posts" v-prerender="">
                        <div>
                            <h2 v-html="post.name"></h2>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</section>
v-scope v-collections-init