Get started with plain Vue

You must first create a project in Plasmic.

To view this quickstart with all the IDs and token placeholders replaced with real values, open your project in Plasmic Studio and press the "Code" button in the top toolbar.

Installation

Copy

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.

Copy

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

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 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):

src/router/index.js

Copy

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

Copy

<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.

src/components/MyComponent.vue

Copy

<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 in the docs.

Give feedback on this page