Get started with plain Vue

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.

src/plasmic-init.ts
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

For client-rendered or single-page apps, we fetch components dynamically at runtime. (These are cached for the lifetime of the application.)

src/components/MyComponent.vue
<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>

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:

src/router/index.js
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 framework
const 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:

src/App.vue
<template>
<PlasmicRootProvider :loader="this.loader">
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<!-- Router renders everything here, including Plasmic pages. -->
<router-view />
</div>
</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>

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.