cmsdriven-vue

CMS platform for Vue.js

You build components in Vue or plain Html using our online editor. Create new routes on the fly and manage how your components appearing in the screen dynamically.

Visit the website: cmsdriven.io

Note: There is an online chat support ready to help you with any question

Install the dependancies

npm i cmsdriven cmsdriven-vue --save

Use vue components to display your content

On your parrent directory there is a file named cmsdriven.js. In this one add the components you want to use with the cmsdriven.

import ComponentOne from '@/components/ComponentOne';
import ComponentTwo from '@/components/ComponentTwo';

export default {
  ComponentOne,
  ComponentTwo,
};

Dynamic Pages

Into your router.js file include the following code

import CmsDrivenRouter from 'cmsdriven-vue/CmsDrivenRouter.vue';

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: YourCustomComponents
    },
    {
      path: '*',
      name: 'cmsdriven',
      component: CmsDrivenRouter,
      props: { accessToken: 'YOUR_CMS_DRIVEN_ACCESS_TOKEN' }
    }
    ...
  ]
  

Use with Prerender for best SEO Results

IF you have not installed yet. Install this package

npm i vue-meta --save

And put it to your Router file

import Meta from 'vue-meta';

....

Vue.use(Router);
Vue.use(Meta); // Use it here

const router = new Router({
....

Add this line to your .gitignore file

cmsdriven-prerender.json

Add this to your package.json file

"scripts": {
    "build": "npm run cmsdriven-prerender && vue-cli-service build",
    "cmsdriven-prerender": "node node_modules/cmsdriven-vue/prerender.js YOUR_ACCESS_TOKEN YOUR_ENV_NAME",
    ...
    }

Add this to your vue.config.js on the prerender Plugin

This is going to help prerender found out all the routes that comming from cmsdriven

const cmsdriven = require('./cmsdriven-prerender.json');

 ....
 
 let prerenderSpaPlugin = new PrerenderSpaPlugin({
  staticDir: path.resolve(__dirname, 'dist'),
  routes: [
    '/my-first-route/',	    
    '/my-second-route/',
    ...Object.keys(cmsdriven)
    ],
    ...