Getting Started

Getting Started

This page takes you from an empty Vue 3 app to a rendered Selldone page. You will install the package, register the page builder in view mode, and render a landing page with LandingRender. Edit mode is covered in View and Edit Modes.

Prerequisites

• A Vue 3 app built with a bundler that compiles .vue, TypeScript and SCSS files (for example Vite). The package publishes source files ("main": "index.ts"), not a prebuilt bundle.
• Vuetify 3, Vue Router, a Vuex store and vue-i18n set up in the app. The renderer uses $route, $store and Vuetify components.
• The Selldone packages the builder depends on: @selldone/core-js, @selldone/sdk-storefront and @selldone/components-vue. They are installed automatically as dependencies.
• A Selldone shop. Create one for free at selldone.com.

The fastest way to get all of this pre-configured is to start from the Storefront project, which already uses the Page Builder. See the Storefront wiki.

1. Install

npm install @selldone/page-builder

yarn add @selldone/page-builder

2. Register the builder (view mode)

Register the $PageHyper service when you create the app. The viewer and the editor wait for this service, and it loads the page builder code the first time a page is displayed:

import { createApp } from "vue";
import { StorefrontSDK } from "@selldone/sdk-storefront";
import { createComponents } from "@selldone/components-vue/components";
import { PageHyper } from "@selldone/page-builder/PageHyperService.ts";

const app = createApp(App);

// Selldone Components (UI used inside pages)
app.use(createComponents({}));

// Storefront SDK (window.$storefront, window.XAPI) used by product and blog sections
StorefrontSDK.Setup();

app.use(i18n);
app.use(router);
app.use(store);
app.use(vuetify);

// Page Builder in view mode
PageHyper(app, { mode: "view" });

app.mount("#app");

If you prefer to load the builder up front, call SetupPageBuilder(app, { mode: "view" }) and set $PageHyper.isInitialized.value = true, as described in View and Edit Modes.

3. Render a page

Add a route that renders LandingRender. It fetches the page JSON from Selldone and renders it:

<template>
  <landing-render :key="$route.fullPath" @onFetch:data="onPage">
    <template v-slot:header>
      <!-- Your shop menu -->
    </template>
  </landing-render>
</template>

<script lang="ts">
import LandingRender from "@selldone/page-builder/LandingRender.vue";

export default {
  components: { LandingRender },
  methods: {
    onPage(data) {
      console.log("Loaded page", data.page.title);
    },
  },
};
</script>

By default the page is chosen from the route (for example $route.params.page_name for a shop landing page). You can also pass a full endpoint with the forceFetchUrl prop.

4. Check the result

Open the route in your browser. You should see the page content rendered inside a #page-builder container. If nothing appears, see the FAQ.

Next steps

• View and Edit Modes — add the visual editor to your app.
• Upload Handlers — let editors upload images and videos.
• Page JSON Structure — understand what is stored.
• Storefront: Start & Build Storefront