7

I would like to know what will be the best way to integrate Vue.js framework inside a CakePHP 3 application?

I'm hoping that there's a way to benefit from all the tools coming with VueCLI (webpack,ect..) while still working without the need to copy generated file inside the CakePHP application.

So what is the most streamlined process to develop an application using CakePHP 3 as the backend and Vue.js as the frontend inside the same project.

Thanks a lot!

3 Answers 3

10

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);
    ...
4
  • Wow! I couldn't ask for more. Thank for the awesome details. I'll try that soon. Aug 10, 2018 at 23:50
  • 3
    I have created a sample skeleton to get started to directly use cakephp with vuejs. Please check it out @github.com/ishanvyas22/cakephpvue-spa
    – Ishan
    Dec 9, 2018 at 10:43
  • This post is so long that assetsPublicPath is no longer an option in VueJS and config/index.js doesn't exist anymore. It's been so long. Does CakePHP still can't easily integrate with Vue ? Do we have to do all this magic ?
    – Jorje12
    Nov 25, 2020 at 13:09
  • Hi @Jorje12, with AssetMix plugin it's very easy to integrate front-end framework like Vue or React with CakePHP. We don't have setup everything mentioned in this answer.
    – Ishan
    Jun 6, 2021 at 10:35
1

You won't get away without copying files around except you don't care about size and loading times. Just throw everything in your webroot/js then load all the needed files in your views and you're OK. Vue is JS, just JS, nothing more. Also I don't see why the coping, which happens automatically, is bad.

IMO JS apps are a huge mess glued somehow together by build scripts.

If you care about an optimized build use npm and webpack and configure Webpack to build your Vue app and define your webroot as target folder. Webpack will allow you to auto-split files and gives you a warning when a file becomes to big.

We've put all our frontend stuff in /resources/js and /scss and so on and build it and have hot reloading active so we can see changes right after we hit save. This is just for development. When deploying to our live systems the JS is build on the live system, we don't add any of the builds to our git repository.

However the "building" of JS apps for the frontend is a pain in the ass if you don't stick to a 100% pure JS frontend app. There is no real standard way of doing it. Even "import" has its quirks and feels more like a hack than a good solution to the problem nor does it solve the issue of packaging files to reduce requests and file size.

Once you've got all the crap glued together it usually works nice but it's really sad that in 2018 there isn't a recommended standard for building JS for web apps. I really hope the way things are done today is going to die soon in favor of Web Assembly.

If you don't want to use Webpack there is require.js and others as well but for us webpack worked the best.

1

Here are the steps I followed:

  1. Create a project using vuejs inside the main app directory.

  2. Add plugins like vue router, vuex etc.

    vue create bos-vue
    vue add vuex
    vue add router
    
  3. You can run the app with following command:

    npm run serve

  4. Install the node modules required for the project:

    npm install --save axios vue-axios

  5. All the data from the cakephp server will be obtained through axios request in the json format.

    axios.get(http://localhost/cakeapp/articles/getdata)

  6. The above call will case CORS issue. To solve the CORS issue in development:

Add headers in .htaccess, Enable headers module of apache, Disble CSRF middleware in application.php

  1. For authentication, request the cakephp server for login and store the user information in local storage (for further use on frontend). Use navigation guards to check if session exists in each axios call response.

  2. For deployment, run: npm run build

  3. Copy everything (except index.html) from dist directory to webroot. Copy index.html in default.ctp

Now everything will run in cakephp as usual.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.