Alokai•17mo ago

Pass data from serverMiddleware to page

How do I pass data from a serverMiddleware to .vue page?

9 Replies

hey @sky515 are you using VSF2 or SDK approach?

sky515OP•17mo ago

VSF2

You can get all the data needed using Composables, they are pre-configured under the hood to communicate with middleware 🙂

sky515OP•17mo ago

Do you have an example? I don't quite get it

skirianov•17mo ago

what integration do you use?

sky515OP•17mo ago

magento

rohrig•17mo ago

hi @sky515 👋 , for most things you can use the out-of-the-box composables. See: https://docs.vuestorefront.io/magento/ If there's some data you need that's not covered by the integration you can extend it. See: https://docs.vuestorefront.io/v2/integrate/extending-integrations.html Please read through those docs. It will help you get a good understanding of how the system works. If you still need help. Feel free to ask another question. 😃

Vue Storefront 2 for Magento | Vue Storefront 2 for Magento

Documentation for the Magento connector for Vue Storefront 2

Extending integrations | Vue Storefront 2

Vue Storefront 2 documentation

RedeemerXT•17mo ago

Guys How to call component method globally ? this my simple dialog component, i want to call Add method outside of it

<template>
    <div class="Dialog">
        <div v-for="(Dialog, Index) in DialogMap" v-bind:class="Dialog.Type">
            {{ Dialog.Message }}<span class="Close" @click="Remove(Index)">×</span>
        </div>
    </div>
</template>

<script setup>
    import * as Vue from 'vue';

    const DialogMap = Vue.reactive(
    [
        { Message: 'You Have Been Logged In', Type: 'Success' },
        { Message: 'Bar2', Type: 'Info' },
        { Message: 'Bar3', Type: 'Warning' },
        { Message: 'You Have Been Logged In', Type: 'Success' },
        { Message: 'Bar2', Type: 'Info' },
        { Message: 'Bar3', Type: 'Warning' },
    ]);

    function Add(Message, Type)
    {
        DialogMap.push({ Message, Type });
    }

    function Remove(Index)
    {
        DialogMap.splice(Index, 1);
    }
</script>

<template>
    <div class="Dialog">
        <div v-for="(Dialog, Index) in DialogMap" v-bind:class="Dialog.Type">
            {{ Dialog.Message }}<span class="Close" @click="Remove(Index)">×</span>
        </div>
    </div>
</template>

<script setup>
    import * as Vue from 'vue';

    const DialogMap = Vue.reactive(
    [
        { Message: 'You Have Been Logged In', Type: 'Success' },
        { Message: 'Bar2', Type: 'Info' },
        { Message: 'Bar3', Type: 'Warning' },
        { Message: 'You Have Been Logged In', Type: 'Success' },
        { Message: 'Bar2', Type: 'Info' },
        { Message: 'Bar3', Type: 'Warning' },
    ]);

    function Add(Message, Type)
    {
        DialogMap.push({ Message, Type });
    }

    function Remove(Index)
    {
        DialogMap.splice(Index, 1);
    }
</script>

skirianov•17mo ago

@RedeemerXT can you please start a new thread, so we don't steal other's replies? 😄

Gaming

Programming

Pass data from serverMiddleware to page