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.