Bundling Vue.js components with webpack for use in PHP applications
Based on post by Michał Męciński: Using Vue.js components in PHP applications
Intro
This repository is intended to be a skeleton for new PHP projects using Vue.js in the front-end.
Setup
- You may clone this repository and go to step 2, or you can:
# create a new repository
git init
# create repository manifest files
touch LICENSE README.md
# add a Initial commit
git add .
git commit -m 'Initial commit'
# [optional] change to a development branch
git checkout -b develop
# add this repository remote and fetch its data
git remote add aryelgois/php-vue https://github.com/aryelgois/php-vue.git
git fetch aryelgois/php-vue
# merge squash
git merge --squash aryelgois/php-vue/master -X ours # --allow-unrelated-histories (for git >2.9)
git commit # Title: 'Import aryelgois/php-vue', Body: Squash log git writes in commit editor- Install dependencies
cd webpack
npm installUsage
Development
It is recommended to use the webpack-dev-server with the hot module replacement for a better experience:
cd webpack
npm run devIt will be using http://localhost:8080 to serve the required files. Apache might be running on port 80, but there is a configuration telling the browser not to block the AJAX requests to 8080.
Production
Generate minified files for production:
cd webpack
npm run buildThey are placed at public/assets/, so configure PHP to use them in the pages.
The example automatially use them if assets.json exists.
The production server does not need the webpack/ directory.
Workflow
Root component
Since the Vue runtime-only build is being used, you
can not include templates in the HTML or in JavaScript. They must be in *.vue
files, compiled by webpack.
So, you create a root component for your application and use webpack/main.js
to render it. e.g.:
// ...
new Vue({
el: '#app',
render: h => h(App)
});And you can not target the <body>, because the target element is replaced by
the component. Use a child element to fill the whole body. Also, the <script>
including the bundle needs to be after such element.
New components
Create Single File Components in webpack/components/ and add them in
webpack/main.js:
// ...
import MyComponent from './components/MyComponent.vue';
// ...
Vue.component('my-component', MyComponent);
// ...Comunication with PHP
Use AJAX to exchange data with the PHP server, with vue-resource.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent