Ok, here is a quick setup :
1) install vuejs in a sub dir of webroot (like webroot/vuedev)
2) config your vue router to use history mode :
export default new Router({
mode:'history',
routes: [
3) Change the assetsPublicPath of the build zone to assetsPublicPath: '',
in webroot/vuedev/config/index.js
4) Because in dev mode your app is running on localhost:8080 and your ajax call your-domain.dev you will have CORS issues. Add header to your ajax calls :
axios.get(url,{headers: {"Access-Control-Allow-Origin": "*"}}).then...
use a prefix "api" for your ajax calls : your-domain.xxx/api/controller/action...
5) Change routing of cakePHP to use REST api :
in config/routes.php :
// add api prefix
Router::prefix('api', function ($routes) {
$routes->fallbacks(DashedRoute::class);
});
// change default route :
Router::scope('/', function (RouteBuilder $routes) {
$routes->connect('/:page',['controller'=>'Pages','action'=>'display']);
$routes->connect('/', ['controller' => 'Pages', 'action' => 'display', 'home']);
$routes->connect('/pages/*', ['controller' => 'Pages', 'action' => 'display']);
$routes->fallbacks(DashedRoute::class);
});
Ajax calls your-domain.xxx/api/controller/action will be proceed normaly.
Every calls to your-domain.com/xxx will be transfert to the controller pages, action display.
6) Copy the index.html content of your webroot/vuedev to your template home (src/Template/Pages/home.ctp) and add to your display action of your controller.
$this->viewBuilder()->setLayout(false);
7) For production :
Launch the building process :
npm run build.
Copy webroot/vuedev/dist/static to webroot/static
Copy the content of webroot/vuedev/dist/index.html to your src/Template/Pages/home.ctp
If someone call manualy a specific page or refresh the browser (ie: your-domain.xxx/Products) your pages controller will send the index.html content.
You can add te param :page to your template/Pages/home.ctp in a global var in script tag to be used by the router :
<script>var routeToJump=<?php echo $yourvar;?>; </script>
And in your App.vue :
export default {
name: 'App',
created() {
this.$router.push(routeToJump);
...