Some vue components for concrete5 form helpers
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

concrete5 Vue tools

This package includes some Vue components which wrapper some standard concrete5 dashboard form helpers.


  1. copy the vuetools folder into your packages folder

  2. install the package

  3. In your page controller include the required assets


namespace Application\Controller\SinglePage\Dashboard;

class Test extends \Concrete\Core\Page\Controller\DashboardPageController
    public function on_start(){
  1. Add your vue markup in your dashboard page
defined('C5_EXECUTE') or die("Access Denied.");
$view->inc('elements/header.php', array('bodyClass' => 'ccm-dashboard-desktop'));
<div class="ccm-dashboard-desktop-grid <?php if (!$c->isEditMode()) { ?>ccm-dashboard-desktop-flex<?php }  ?>">

<h1>My Dashboard Page</h1>

<div id="app">
<ccm-file-selector v-model="fID"></ccm-file-selector>
<ccm-page-selector v-model="cID"></ccm-page-selector>
<ccm-user-selector v-model="uID"></ccm-user-selector>
<ccm-editor v-model="content"></ccm-editor>

<?php $view->inc('elements/footer.php'); ?>
  1. Add your vue javascript at the bottom of the page or wherever you like to put your javascript
var vm = new Vue({
    el: '#app',
    data: {
        fID: 0,
        cID: 0,
        uID: 0,
        content: '<p>I love concrete5</p>'


  • add component for ckeditor
  • update file selector to include file operation dialog (now it just picks a file and that's it)
  • update file selector to allow clearing of a file