Get started with Nuxt

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 public API token: open the project in Plasmic Studio, and click the Code toolbar button.

Render a single Plasmic page or component

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

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

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>

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>

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.