1.5.0 • Public • Published

    CMS Magento 2 data extension

    To display Cms data:

    • install snowdog/module-cms-api composer module in your Magento 2 instance, snowdog/module-cms-api on github
    • make sure that in vue-storefront-api repo the cms-data extension is installed

    Cms Block

    To display Cms Block import CmsData component and use it in template:

    import CmsData from '@vue-storefront/extension-magento2-cms/components/CmsData'

    we have to options to get Cms Block data:

    1. by Magento identifier: <cms-data :identifier="'contact-us-info'" :type="'Block'" /> where contact-us-info is a Cms Block identifier from Magento 2 instance

    this option handles different Store Views - if multistore is enabled, it takes Cms Block by current Store View, if it's disabled, it set default Store View (0)

    1. by Magento id <cms-data :id="5" :type="'Block'" /> where 5 is a Magento id of Cms Block. It doesn't handle differents Store Views so please use it only when multistore it's enabled/

    Cms Page

    To display Cms Page:

    1. Cms page content like a block
    • in custom theme create new page with custom route
    • import CmsData component and use it in template: import CmsData from '@vue-storefront/extension-magento2-cms/components/CmsData'

    call Cms Page like a Block using either Magento identifier: <cms-data :identifier="'about-us'" :type="'Page'" />

    or Magento id <cms-data :id="5" :type="'Page'" /> where 5 is a cms page identifier from Magento 2 instance

    Like Cms Block, the Cms Page by identifier handles different Store Views, Cms Page by id handles only Default Store View/

    1. Cms page content as a page component:
    • in custom theme themes/<theme-name>/router/index.js import CmsData component, add custom route and define props: {identifier: :pageIdentifier, type: 'Page', sync: true}, example:
    import CmsData from '@vue-storefront/extension-magento2-cms/components/CmsData'
    const routes = [
      // ... theme routes
      { name: 'cms-page-sync', path: '/cms-page-sync', component: CmsData, props: {identifier: 'about-us', type: 'Page', sync: true} }

    Complete examples of usage and implementation you can find in Default theme:

    1. /cms-page-sync, src/themes/default/router/index.js
    2. /custom-cms-page, src/themes/default/router/index.js, src/themes/default/pages/CustomCmsPage.vue




    npm i @vue-storefront/extension-magento2-cms

    DownloadsWeekly Downloads






    Unpacked Size

    6.58 kB

    Total Files


    Last publish


    • wojciechsikora
    • mpietrusinski
    • filrak
    • fifciuu
    • andre3000
    • lukasborawski
    • laran01
    • bloodf