Integrating Vue+Vite into an existing PHP project

Question

I am experienced on PHP and Javascript and used them extensively up to now. I never used modern js frameworks like Vue, Angular or React and very new to this concept. And also have no experience with bundlers.

Now I want to try it and enter to the new world of modern web app development. I've started reading with Vue docs and liked it.

But I am not ready to develop a Single Page App from scratch. Instead I want to try it within an existing project (with PHP backend and ES6 frontend)

I've searched for such integrations but could not found any helping document.

I want to use:

.vue SFC files
Hot updates (HMR)
Vite

More info:

The PHP framework I use have single index.php entry and virtual routing via htaccess.

Simple structure is like:

www/
├──.htaccess
├──index.php
├──Application/
├──public/
│   ├── js/
│   ├── css/
├──Modules/
│   ├──MyVueApp/
│   │   ├──Controllers/
│   │   ├──Views/
│   │   │   ├──index.phtml
│   │   ├──Model.php
│   │   ├── //and etc...

At location http://localhost/en/MyVueApp Backend framework renders a dynamic index page within a layout.

Contents of index.phtml

<?php
$this->layout->addCss('css/my-vue-app/main.css')
$this->layout->addJs('js/my-vue-app/main.js')
?>

<div id="app"><!-- vue app mounts here --></div>

How can I install and run Vite+Vue on this structure and how can I publish it for production ?

ask yourself why you even need php? once you bundle the SPA its can be run from apache or any other static file server, its a SPA after all, you won't need $this->layout->addCss and $this->layout->addJs etc, PHP's job would be simply a rest API, but then your ask yourself why put PHP in the mix when nodejs is js, and doesn't need additional tools, like, server, PHP installed, diff linters and package mangers etc etc. — Lawrence Cherone
– Lawrence Cherone, Commented Jul 23, 2021 at 20:27
The question was sipmlified to make it easy ro understand. Actual situation is more complicated. I am trying to integrate Vue into an existing project. I can not use an index.html file cause I have to use PHP frameworks layout engine. — Zortext
– Zortext, Commented Jul 23, 2021 at 20:30

Zortext · Accepted Answer · 2021-07-24 10:13:58Z

6

The solution can be found at https://github.com/andrefelipe/vite-php-setup

Live Reload Plugin makes the job.

https://www.npmjs.com/package/vite-plugin-live-reload

answered Jul 24, 2021 at 10:13

Zortext

63910 silver badges22 bronze badges

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

Comments

donnikitos · Accepted Answer · 2023-08-24 07:52:55Z

5

Just recently I've published vite-plugin-php a Vite plugin to use PHP-files as entry points for your application.
This helps me a lot with the development of smaller sites. You can use all the usual tools like Tailwind, TypeScript etc. without any major hackarounds.

Have a look at:
https://www.npmjs.com/package/vite-plugin-php

answered Aug 24, 2023 at 7:52

donnikitos

1,0211 gold badge15 silver badges21 bronze badges

Collectives™ on Stack Overflow

Integrating Vue+Vite into an existing PHP project

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related