Get started with plain Vue
You must first create a project in Plasmic.
Installation
npm install @plasmicapp/loader-vue# or yarn add @plasmicapp/loader-vue
The package is compatible with Vue 2 and 3. But if you are using Vue 2 you need to install a peer dependency.
npm install @vue/composition-api# or yarn add @vue/composition-api
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 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 catch-all route for your specific routing framework.
For vue-router (don’t forget to plug it in your App / main.js
file):
import Vue from 'vue';import VueRouter from 'vue-router';import { PlasmicComponent } from '@plasmicapp/loader-vue';import { PLASMIC } from '../plasmic-init';
Vue.use(VueRouter);
// 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: '*', component: CatchAllPage }];
// Your usual routing.const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, 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.
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
.
<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.