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
app
entry withchainWebpack
. -
Update
outputDir
to point at laravel'spublic
directory. -
Update
publicPath
for both local development and prod. This will allow you to use both hmr and built files locally.NODE_ENV
will already exist onprocess.env
butWEBPACK_HOST
andWEBPACK_PORT
will 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 likedotenv
to read your laravel.env
file. -
Update
pages
to 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,
resourcePath
andfilenameForEnv
, were added to the config to help manage output file naming based on the current environment.resourcePath
handles 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 serve
from your frontend directory and modify yourroutes/web.php
.You should now be able to see the default vue page!
- Update your
.gitignore
to avoid checking in built templates and files.