Download the PHP package m-porter/vue-template-loader without Composer
On this page you can find all versions of the php package m-porter/vue-template-loader. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package vue-template-loader
Vue Template Loader
Laravel package which will download your html templates as built by webpack-html-loader for use in your projects.
Intended for use with vue-cli.
Installation
Require this package with composer.
| Laravel version | This package version |
|---|---|
| ^6.0|^7.0 | ^6.0.0 |
| ^5.5,<5.9 | ^0.2.0 |
Package Discovery
If you don't use auto-discovery, add the ServiceProvider to the providers array in config/app.php.
Configuration
Copy the package config to your local config with artisan's vendor:publish command:
Usage
This package is very opinionated and requires changes to your default vue.config.js file. Vue-template-loader is intended to be used with vue-cli's multi-page mode.
You can assume the following laravel project structure for this usage tutorial. (Modified directory structure after running vue create frontend).
-
Remove the default
appentry withchainWebpack. -
Update
outputDirto point at laravel'spublicdirectory. -
Update
publicPathfor both local development and prod. This will allow you to use both hmr and built files locally.NODE_ENVwill already exist onprocess.envbutWEBPACK_HOSTandWEBPACK_PORTwill not. You will need to either add it to your npm scripts (e.g.WEBPACK_HOST=0.0.0.0 vue-cli-service serve) or use a npm package likedotenvto read your laravel.envfile. -
Update
pagesto include your frontend app. For this example, you can assume the following app structure.NOTE: Your folder CANNOT be named
app. This is a reserved folder name in vue-cli.Two helper functions,
resourcePathandfilenameForEnv, were added to the config to help manage output file naming based on the current environment.resourcePathhandles sending the built html template to the vue-template-loader expectedresource_path('views/vue')directory it reads from on the PHP side. -
Test it out! Run
npm run servefrom your frontend directory and modify yourroutes/web.php.You should now be able to see the default vue page!
- Update your
.gitignoreto avoid checking in built templates and files.