Warning: This project has no pages or components, so there is nothing to load! Please create some pages or components first.

This project's public API token:APITOKEN

Copy

Installation

Copy

npm install @plasmicapp/loader-vue
# or yarn add @plasmicapp/loader-vue

Initialization

Initialize Plasmic with the project ID and public API token. Define this in its own module to make it available globally.

./plasmic-init.ts

Copy

import { initPlasmicLoader } from "@plasmicapp/loader-vue";
export const PLASMIC = initPlasmicLoader({
  projects: [
    {
      id: "PROJECTID",  // ID of a project you are using
      token: "APITOKEN"  // API token for that project
    }
  ],
  // Fetches the latest revisions, whether or not they were unpublished!
  // Disable for production to ensure you render only published changes.
  preview: true,
})

To find your project’s ID and public API token: open the project in Plasmic Studio.

The project ID is in the URL, like: https://studio.plasmic.app/projects/PROJECTID.

The public API token can be found by clicking the Code toolbar button.

Auto load all Plasmic pages

To automatically render all Plasmic-defined pages at the routes specified in Plasmic, create a Nuxt catch-all route that fetches and renders all pages at build time:

pages/_.vue

Copy

<template>
  <PlasmicRootProvider :loader="this.loader" :prefetchedData="this.plasmicData">
    <PlasmicComponent :component="this.componentName" />
  </PlasmicRootProvider>
</template>

<script lang="ts">
import { PlasmicComponent, PlasmicRootProvider } from "@plasmicapp/loader-vue";
import Vue from "vue";
import { PLASMIC } from "../plasmic-init";
export default Vue.extend({
  async asyncData({params, error}) {
    const plasmicData = await PLASMIC.maybeFetchComponentData(`/${params.pathMatch}`);

    if (plasmicData) {
      // if plasmicData was returned, then this was a page defined in Plasmic
      return {
        plasmicData,
        componentName: plasmicData.entryCompMetas[0].name
      };
    } else {
      // else, give a 404 error
      error({
        statusCode: 404
      });
    }
  },
  computed: {
    loader() {
      return PLASMIC
    }
  },
  components: {
    PlasmicRootProvider,
    PlasmicComponent
  }
});
</script>

Render a single Plasmic page or component

Note: You can instead auto-load all Plasmic pages at the correct routes (recommended) rather than manually loading individual pages—see previous section.

We use Nuxt’s asyncData() to fetch the design statically/server-side.

PATH_OR_COMPONENT refers to the name of the page or component that you want to render, such as Winter22LandingPage. If it’s a page, you can also use the route you assigned the page in Plasmic, like /landing.

pages/mypage.vue

Copy

<template>
  <PlasmicRootProvider :loader="this.loader" :prefetchedData="this.plasmicData">
    <h1>Does this work?</h1>
    <PlasmicComponent component="COMPONENTNAME" />
  </PlasmicRootProvider>
</template>

<script lang="ts">
import Vue from 'vue'
import { PlasmicRootProvider, PlasmicComponent } from '@plasmicapp/loader-vue'
import { PLASMIC } from '../plasmic-init'

export default Vue.extend({
  components: {
    PlasmicRootProvider,
    PlasmicComponent,
  },
  computed: {
    loader() {
      return PLASMIC
    },
  },
  async asyncData() {
    const plasmicData = await PLASMIC.fetchComponentData(`COMPONENTNAME`)
    return {
      plasmicData,
    }
  },
})
</script>

There’s much more to explore!

Perform server-side rendering.
Render different variants.
Override the content or props.
Add dynamic behavior.

Continue learning in the docs.