Services

<div>{{$sdk.app.services.basicDetails.businessName}}</div>

// Create a 'basicDetails' service
{
    businessName: 'Business',
    phoneNumber: '123456789',
    emailAddress: 'email@site.com',
    get address() {
        return `123 Road Street, Villageville, ${this.country}`
    },
    get country() {
        return `Australia`
    }
}

<div v-if-="$sdk.services.dataService.loading">
    Loading blogs
</div>
<div v-else>
    <div v-for="blog in $sdk.services.dataService.items">
        <h3>{{blog.title}}</h3>
        <div v-html="blog.body" />
    </div>
</div>

// A 'dataService' service
{
    items: [],
    loading: false,
    loaded: false,
    async reload() {

        if (this.loading) {
            // The service is already loading content
            return;
        }

        this.loading = true;
        this.loaded = false;

        // Load all the 'blog' items we have access to
        const {
            items
        } = await $sdk.content.list(`blog`, {
            select: ['title', 'data', 'body', 'meta'],
            page: {
                size: 20,
            }
        });

        // Now we have the items add them to the service
        this.items = items;

        // Mark that the service has loaded
        this.loading = false;
        this.loaded = true;
    },
    // Load all the blogs as soon as the service is instantiated.
    init() {
        this.reload();
    }
}