Download the PHP package fabriziocaldarelli/yii2-vueapp without Composer
On this page you can find all versions of the php package fabriziocaldarelli/yii2-vueapp. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download fabriziocaldarelli/yii2-vueapp
More information about fabriziocaldarelli/yii2-vueapp
Files in fabriziocaldarelli/yii2-vueapp
Package yii2-vueapp
Short Description A Vue.js helper for create Vue app in Yii2 without webpack or similar
License BSD-3-Clause
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package yii2-vueapp
Vue.js helper for Yii2
This is a component that helps to create Vue.js app without usign webpack or similar.
All assets (js, css and templates) are injected directly in the html and this components provides functionalities to split the code (js, css and templates) and to load parameters from html root element.
Two default packages are embedded with this component: Axios and Moment. There is an example that shows how use both in the code.
Installation
The preferred way to install this extension is through composer.
Either run
or add
to the require section of your composer.json file.
How it works
This component injects js, css and tpl (php or html) files into the returned html.
These files are read starting from same folder of action view file, appending vueapp/actionName/js or vueapp/actionName/css or vueapp/actionName/tpl
VueApp::begin mainly supports three parameters:
- id: vue app html tag id selector;
- propsData: widget uses this element to pass data from html/php to js script;
- packages: list of packages that should be loaded into js vue script
Pay attention: propsData keys have the same name (and same case) in php and in js file.
Usage
1) The view file
Inside the view, call VueApp widget:
The most important parameter is packages that loads embedded packages such as Axios and Moment.
You have to install all packages declared in assets property:
2) The Vue app js files
Starting from view path folder, js files for app and components are in vueapp/test/js/actionName/ .
For example, the path for main vue app js could be vueapp/test/js/test.js
3) The Vue app css files
Starting from view path folder, css files for app and components are in vueapp/test/css/actionName/ .
For example, the path for main vue app css could be vueapp/test/css/test.css
Tips & Tricks
1. Pass data from html/php to js
To pass data from html/php to js vue app, I used an attribute called propsApp, whithin are defined attributes passed in html root element.
For example, html root element "vueAppTest":
all parameters defined in data.propsApp are readed from html when app is mounted (calling readPropsApp method):
2. Component registration
JS files loading order is important when the app js file depends from other js files.
So, I suggest to prefix all component files with '_' or suffix with '.component.' in order to load component js files firstly.
3. Pass object data from html/php to js
Passing objects/array from html/php to js is the same of primitive dat (Tips and triks #1).
The only different thing is that in mounted() function you need to parse json string to the object.
So, if kObject is the object passed from php, mounted() method will be:
