How to integrate php code in a vuejs project for production building?

Question

Using CLI to generate a project with

vue create project

How can i integrate php code in .Vue files and not break the building command :

npm run build

As an example i want to add <?php ?> code inside the famous Home.vue view like so :

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <?php echo("this break the building"); ?>

  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.php";

export default {
  name: "home",
  components: {
    HelloWorld
  }
};
</script>

Changing Home.vue to Home.php dont solve the problem.

Create two repos, one with vue frontend and other with php backend. Set a hook command using shell (or bat in windows) to run npm run build in frontend repo everytime you run some serve, test or deploy command in backend repo. — Enrique René
– Enrique René, Commented Aug 31, 2020 at 3:38

kalenpw · Accepted Answer · 2019-04-03 22:20:20Z

6

You can't.

VueCLI generates a static project of simply html and javascript. When you run npm run build if you look in your /dist folder you'll see only .html and .js files.

If you would like to use data from PHP in a Vue app you would need to add your Vue components to a PHP project and pass data to Vue as props.

Alternatively, a very common approach is to have a separate Vuejs frontend which consumes an API which you could write in PHP.

answered Apr 3, 2019 at 22:20

kalenpw

6953 gold badges11 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kube Kubow Over a year ago

In addition here you can find some basic solution: makitweb.com/…

Collectives™ on Stack Overflow

How to integrate php code in a vuejs project for production building?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related