This project's public API token: APITOKEN
Installation
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.
import { initPlasmicLoader } from "@plasmicapp/loader-vue";export const PLASMIC = initPlasmicLoader({projects: [{id: "PROJECTID", // ID of a project you are usingtoken: "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.
Note that if you want to move credentials into a .env file, you may need to prefix the environment variables with VUE_APP_
if using Vue CLI. See full docs.
Auto load all Plasmic pages
To automatically render all Plasmic-defined pages at the routes specified in Plasmic, create a catch-all route for your specific routing framework.
For vue-router (don’t forget to plug it in your App / main.js
file):
import { createRouter, createWebHistory } from "vue-router"; // vue-router 4.ximport { PlasmicComponent } from "@plasmicapp/loader-vue";import { PLASMIC } from "../plasmic-init";// Create a catch-all route for your specific routing frameworkconst CatchAllPage = {data() {return {loading: true,pageData: null,};},created() {this.fetchData();},render() {if (this.loading) {return <div>Loading...</div>;}if (!this.pageData) {return <div>Not found</div>;}return <PlasmicComponent component={location.pathname} />;},methods: {async fetchData() {const pageData = await PLASMIC.maybeFetchComponentData(location.pathname);this.pageData = pageData;this.loading = false;},},};const routes = [/* ... Your other routes here ... */// Add this route to catch all pages{path: "/:pathMatch(.*)*",component: CatchAllPage,},];const router = createRouter({history: createWebHistory(),routes,})export default router;
Wrap your router-view
in a PlasmicRootProvider
:
<template><PlasmicRootProvider :loader="this.loader"><!-- Router renders everything here, including Plasmic pages. --><router-view /></PlasmicRootProvider></template><script>import { PlasmicRootProvider } from '@plasmicapp/loader-vue';import { PLASMIC } from './plasmic-init';export default {name: 'App',components: {PlasmicRootProvider},computed: {loader() {return PLASMIC;}}};</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.
For client-rendered or single-page apps, we fetch components dynamically at runtime. (These are cached for the lifetime of the application.) These are served from a globally replicated instance of the AWS Cloudfront CDN.
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
.
<template><div id="app"><PlasmicRootProvider :loader="this.loader"><PlasmicComponent component="COMPONENTNAME" /></PlasmicRootProvider></div></template><script>import { PlasmicRootProvider, PlasmicComponent } from '@plasmicapp/loader-vue';import { PLASMIC } from './plasmic-init';export default {name: 'MyComponent',components: {PlasmicRootProvider,PlasmicComponent},computed: {loader() {return PLASMIC;}}};</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
.