Get started with Nuxt

You must first create a project in Plasmic.

To view this quickstart with all the IDs and token placeholders replaced with real values, open your project in Plasmic Studio and press the “Code” button in the top toolbar.

The loader library works with Nuxt 3 and Nuxt Bridge, but not Nuxt 2.

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:

Copy

<template>
  <PlasmicRootProvider :loader="PLASMIC" :prefetchedData="plasmicData">
    <PlasmicComponent :component="$route.fullPath" />
  </PlasmicRootProvider>
</template>

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

const route = useRoute();
const plasmicData = await PLASMIC.fetchComponentData(route.fullPath);
</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.

COMPONENT_OR_PAGEROUTE 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.

Copy

<template>
  <PlasmicRootProvider :loader="this.loader" :prefetchedData="this.plasmicData">
    <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 {
  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 the API in the docs

Was this page helpful?

Have feedback on this page? Let us know on our forum.