Skip to content

jacobfogolyan/vsf2-strapi-cms

Repository files navigation

Strapi CMS v4 Vue Storefront Integration / Nuxt

vsf logo

+

strapi logo

Steps

  1. VSF Installation Steps
  2. Strapi Installation

VSF Installation

🚀

  1. yarn add vsf2-strapi-cms
  2. add confiuguration to middelware.config.js
// ./middleware.config.js
module.exports = {
    integrations: {
        ...
        strapi: {
            location: "vsf2-strapi-cms/server",
            configuration: {
                url: 'http://localhost:1337',
                prefix: '/api',
                axiosOptions: {},
            }
        }
        ...
    }
}
  1. add vsf2-strapi-cms to build modules
// nuxt.config.js
    buildModules: [
      ['@vue-storefront/nuxt', {
        useRawSource: {
            dev: [
              '@vue-storefront/core',
                ...,
                'vsf2-strapi-cms'
            ],
            prod: [
                '@vue-storefront/core',
                ...,
                'vsf2-strapi-cms'
            ]
        }
      }]
    ],
    modules: [
      ['vsf2-strapi-cms/nuxt', {
        imageHost: 'http://localhost:1337/'
      } ],    
    ]
  1. add cms components to nuxt.config.js, see docs
export default {
  ...
  components: ['~/components/cms'],
  ...
}

Usage

// .vue component
import { useContent } from 'vsf2-strapi-cms'
import { onSSR } from '@vue-storefront/core'

export default {
    setup() {
        const { search: searchContent, loading, content, error } = useContent()

        onSSR(async () => { // or `useFetch` in nuxt composition api
          await searchContent({
            contentType: "blog-posts",
            find: true,
            sort: "Title"
          })
        });

        return {
            loading,
            content,
            error
        }
    }
}

Strapi Installation

Installing Strapi Models

These instructions are to be followed in your strapi cms codebase.

  1. Copy contents of api folder to existing ./src/api folder. If the api folder doesn't exist create it.
  2. Copy over component folder. create component folder it one doesn't exist already.
  3. yarn add strapi-plugin-populate-deep see https://market.strapi.io/plugins/strapi-plugin-populate-deep this package was needed so strapi would return content array in Dynamic Zones. This package returns all fields and media objects

About

Vue Storefront 2 + Strapi v4 CMS integration

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published