Using PHP with Vue CLI

Hi, I’ve downloaded Vue CLI and I wandered how can I implement PHP to my website.
I tried to change the MAMP localhost port to 8080 but it didn’t work at all.

Hm I join to that question. I could easily use php with vue as just cdn.
When I have to serve on port all I can do is serve php on another port and communicate with API.
But can’t i just use vue and php in one project?

Sure you can. You would usually run 2 servers when developing.

  1. The Server with your PHP backend
  2. the devserver from the vue-cli project, serving your frontend, offering Hot Module Releaoding etc.

To make those two work together, you have to tell the dev server to proxy requests that are meant for the API server to that server.

Let’s assume that your API server runs on localhost:3000, and your dev server runs on localhost:8080

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '^/api/': {
        target: 'http://localhost:3000',
        changeOrigin: true, // so CORS doesn't bite us. 
      }
    }
  }
}

Docs: https://cli.vuejs.org/config/#devserver-proxy

Now all requests from our frontend that go to localhost:8080/api/... (your devserver) will be proxied to localhost:3000/api/... (our PHP backend server) and back again.

1 Like

Could you tell the location of the vue.config.js file please ? I can’t find its location. Is it the same as babel.config.js ?
(I’m using Vue CLI version 3 It can help)

Yes. Read about it here:

https://cli.vuejs.org/config/#vue-config-js

There seems to be an error I created the vue.config.js file, added your code, implemented the Jquery CDN. This is an extract from my App.vue file:

$(document).ready(function() {
    // test if JQuery works (it throwed some errors but the #br is blue)
    $("#br").css("color", 'blue')
    $.ajax({
          url:'hi.php'
      });
})

This is my hi.php file located in the src folder:

<?php
  echo 'alert("hi")'
?>

And so the is my vue.config.js file newly created:

module.exports = {
  devServer: {
    proxy: {
      '^/api/': {
        target: 'http://localhost:8888',
        changeOrigin: true, // so CORS doesn't bite us. 
      }
    }
  }
}

I use the default version of MAMP and when I go to localhost://8080/api or localhost://8080 the php code isn’t executed.
Any idea ?

Well, my example only redirects request paths that start with /api/.
You on the other hand are requesting /hi.php - so nothing is proxied to your backend.

Also, you are doing an ajax request and send Javascript back. Even if the request would be proxied successfully, this piece of javascript would not be run, but that’s a problem to solve with jquery.

By /src folder I assume in your PHP project? PHP code in your vue project’s /src directory will not run this way.

I’m really sorry but I can’t achieve it, I don’t understand why It doesn’t work and what I have to change.
Here’s my directory structure:
Files/api -> hi.php
Files/myApp -> vue.config.js
vue.config.js:

module.exports = {
 devServer: {
     proxy: {
  '^/api/': {
    target: 'http://localhost:8888',
    changeOrigin: true, // so CORS doesn't bite us. 
  }
}

}
}

When I go to http://localhost:8080/api/ I get this: 41
When I click hi.php, my php code is executed but my Vue code isn’t.
So have you got an example of a vue project that uses the proxy ?

I’m not sure why that’S a problem. You’re supposed to access /api/hi.php via ajax, does that till not work? And I think you mean that you access localhost:8888 ? and on Port 8888 you MAMP server is running?

I’m really guessing here what your setup is so it’s hard to give specific answers.

My bad. My question was not very clear. What I want to do is that when I click a specific button, the hi.php script is executed with the Vue script, in that way, when I click the button, I would still see the Vue logo and everything. I was just testing with a simple echo 'hi' to see if that worked.
Like that:

$('#MyBTn').on('click',function(){
    $.executePHP("echo 'Hi'")
})

=

 $('#MyBTn').on('click',function(){
    $('#MyBTn').append("Hi")
})

Vue runs on localhost:8080 and MAMP runs on localhost:8888.

and something like this doesn’t work?

$.ajax({
          url:'/api/hi.php'
      }).then(result => window.alert(result));

(I haven’t used jquery ajax in years so my syntax is probably off?)

1 Like

Thank you for your proxy help; now I am able to combine my Vue development server running on port 8080 with a local PHP server running on port 2222.

I am using CKeditor in my application (so port 8080) and a PHP file browser (port 2222) which can be called from CKeditor when for example selecting an uploaded image. However there is a CORS issue when doing the callback function…

var funcNum = getUrlParam('CKEditorFuncNum');
window.opener.CKEDITOR.tools.callFunction(funcNum, fileUrl, '');
window.close();

Would you have a suggestion how to handle that?