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

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.

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

src/router/index.jsx

Copy

import { createRouter, createWebHistory } from "vue-router"; // vue-router 4.x
import { PlasmicComponent } from "@plasmicapp/loader-vue";
import { PLASMIC } from "../plasmic-init";

// 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: "/:pathMatch(.*)*",
    component: CatchAllPage,
  },
];

const router = createRouter({
  history: createWebHistory(),
  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.

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.

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

Was this page helpful?

Give feedback on this page