vuejs-ecommerce-headless-buttercms4.js

import butter from '@/buttercms';
import NotFound from './NotFound';

export default {
  name: 'ProductPage',
  components: {
    NotFound,
  },
  data() {
    return {
      product: {
        slug: '',
        fields: {},
      },
      notFound: false,
    };
  },
  // here
  props: ['slug'],
  methods: {
    getProduct() {
      // and here, that's it! :)
      butter.page.retrieve('product', this.slug)
        .then((res) => {
          this.product = res.data.data;
        }).catch(() => {
          this.notFound = true;
        });
    },
  },
  created() {
    this.getProduct();
  },
};