Skip to main content

How to Connect to a CMS

Vev is a powerful front-end editor designed to seamlessly integrate with any CMS (Content Management System) or other data sources, enabling dynamic content display. It supports both client side and server side rendering, making it adaptable to any web application built with any programming language or framework.

architecture

With Vev, you can build a fully customizable frontend that can be entirely self-hosted alongside your existing frontend architecture. Either to build full pages or components. It can also be used alongside existing content.

Variables​

Variables are the backbone of dynamic projects in Vev, enabling external modification of content.

Variables are placeholders in your Vev project that dynamically update with data from a CMS or other sources. Here's how to get started:

  • Identify the elements in your project (e.g., text, images, styling) that will use variables.
  • Configure these elements to accept dynamic data.

variables

Supported variables:

  • Text Variables: Dynamically update text, such as titles or descriptions.
  • Image Variables: Swap or update images without modifying the project manually.
  • List Variables: Perfect for collections, like slider or list items.
  • Styling Variables: Modify styles dynamically, such as colors or sizes.

Compile project​

The Vev CLI allows you to compile your project into static files for seamless integration with any CMS and web application. The compiled files also include an embed.js script, for client side rendering script, and index.mustache file for serer side rendering.

To compile the project, you run the the compile command:

vev compile [project-id]
info

You can also specify the project to compile in vev.json.

  • Benefits of Compiling:
    • Converts Vev projects into deployable files (HTML, CSS, JavaScript).
    • Facilitates efficient storage and integration with CMS data.
  • Storage Tip: Store the compiled files in your web application's static folder for optimal performance.

Replace variables​

Vev provides two primary methods for variable replacement:

Client Rendering​

  • How it Works: Variables are replaced in the browser after the page loads using Vev Embed.
  • Best For: Scenarios where you do not have a server available.

Documentation for client rendering

Server Rendering​

  • How it Works: Variables are replaced on the server using Mustache templates.
  • Best For: Scenarios where you have server.

By following these steps and leveraging Vev's flexibility, you can create dynamic, efficient, and highly customizable front-end projects that seamlessly connect to any CMS or data source.

Documentation for server rendering