This package includes some Vue components which wrapper some standard concrete5 dashboard form helpers.
-
copy the vuetools folder into your packages folder
-
install the package
-
In your page controller include the required assets
<?php
namespace Application\Controller\SinglePage\Dashboard;
class Test extends \Concrete\Core\Page\Controller\DashboardPageController
{
public function on_start(){
$this->requireAsset('core/file-manager');
$this->requireAsset('core/sitemap');
$this->requireAsset('vuetools');
}
}
- Add your vue markup in your dashboard page
<?php
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">
<label>Image</label>
<ccm-file-selector v-model="fID"></ccm-file-selector>
<label>Page</label>
<ccm-page-selector v-model="cID"></ccm-page-selector>
<label>User</label>
<ccm-user-selector v-model="uID"></ccm-user-selector>
<label>Content</label>
<ccm-editor v-model="content"></ccm-editor>
</div>
</div>
<?php $view->inc('elements/footer.php'); ?>
- Add your vue javascript at the bottom of the page or wherever you like to put your javascript
<script>
var vm = new Vue({
el: '#app',
data: {
fID: 0,
cID: 0,
uID: 0,
content: '<p>I love concrete5</p>'
}
});
</script>
- 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