PHPackages m-porter/vue-template-loader - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. m-porter/vue-template-loader ActiveLibrary[Utility & Helpers](/categories/utility) m-porter/vue-template-loader ============================ Laravel package which will download your html templates as built by webpack-html-loader for use in your projects. v7.0.0(3y ago)023MITPHPPHP >=7.2.5 Since Mar 14Pushed 3y agoCompare [ Source](https://github.com/M-Porter/vue-template-loader)[ Packagist](https://packagist.org/packages/m-porter/vue-template-loader)[ RSS](/packages/m-porter-vue-template-loader/feed)WikiDiscussions master Synced 2d ago READMEChangelog (7)Dependencies (2)Versions (9)Used By (0) 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](https://cli.vuejs.org/). Installation ------------ [](#installation) Require this package with composer. ``` composer require m-porter/vue-template-loader ``` Laravel versionThis package version^6.0|^7.0^6.0.0^5.5,<5.9^0.2.0### Package Discovery [](#package-discovery) If you don't use auto-discovery, add the `ServiceProvider` to the providers array in `config/app.php`. ``` MPorter\VueTemplateLoader::class, ``` ### Configuration [](#configuration) Copy the package config to your local config with artisan's vendor:publish command: ``` php artisan vendor:publish --provider="MPorter\VueTemplateLoader\ServiceProvider" ``` Usage ----- [](#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`). ``` /frontend ├── package-lock.json ├── package.json ├── src │   ├── example-app │   │   ├── App.vue │   │   ├── assets │   │   │   └── logo.png │   │   ├── components │   │   │   └── HelloWorld.vue │   │   ├── index.blade.php │   │   └── main.js └── vue.config.js ``` - Remove the default `app` entry with `chainWebpack`. ``` // vue.config.js module.exports = { + chainWebpack: (config) => { + config.entryPoints.delete('app'); + }, }; ``` - Update `outputDir` to point at laravel's `public` directory. ``` // vue.config.js module.exports = { + outputDir: '../public/assets', chainWebpack: (config) => { config.entryPoints.delete('app'); }, }; ``` - 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 on `process.env` but `WEBPACK_HOST` and `WEBPACK_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 like `dotenv` to read your laravel `.env` file. ``` // vue.config.js + const isProd = process.env.NODE_ENV === 'production'; + const host = process.env.WEBPACK_HOST || '0.0.0.0'; + const port = process.env.WEBPACK_PORT || 8080; module.exports = { + publicPath: isProd ? '/assets' : `http://${host}:${port}/`, outputDir: '../public/assets', chainWebpack: (config) => { config.entryPoints.delete('app'); }, }; ``` - 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.** ``` // vue.config.js const isProd = process.env.NODE_ENV === 'production'; const host = process.env.WEBPACK_HOST || '0.0.0.0'; const port = process.env.WEBPACK_PORT || 8080; + const resourcePath = (n) => path.join('../../resources/views/vue', `${n}.blade.php`); + const filenameForEnv = (n) => (isProd ? resourcePath(n) : `${n}.html`); module.exports = { + pages: { + 'example-app': { + title: 'Example App', + entry: 'src/example-app/main.js', + template: 'src/example-app/index.blade.php', + filename: filenameForEnv('example-app'), + }, + }, publicPath: isProd ? '/assets' : `http://${host}:${port}/`, outputDir: '../public/assets', chainWebpack: (config) => { config.entryPoints.delete('app'); }, }; ``` Two helper functions, `resourcePath` and `filenameForEnv`, 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 expected `resource_path('views/vue')` directory it reads from on the PHP side. - Test it out! Run `npm run serve` from your frontend directory and modify your `routes/web.php`. ``` // routes/web.php use Illuminate\Support\Facades\Route; use MPorter\VueTemplateLoader\Loader; Route::get('/', function () { return view(Loader::getTemplate('example-app')); }); ``` You should now be able to see the default vue page! - Update your `.gitignore` to avoid checking in built templates and files. ``` public/assets/ resources/views/vue/ ``` ### Health Score 26 — LowBetter than 41% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity6 Limited adoption so far Community6 Small or concentrated contributor base Maturity61 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~226 days Recently: every ~338 days Total 7 Last Release 1309d ago Major Versions v0.2.2 → v6.0.02020-05-24 v6.0.0 → v7.0.02022-11-28 PHP version history (3 changes)v0.1.0PHP >=7.0 v6.0.0PHP ^7.2.5 v7.0.0PHP >=7.2.5 ### Community Maintainers ![](https://www.gravatar.com/avatar/4a922d75a25da8f123c015bff8952888b56e10384fe6cbb807ba5a59a830bc4a?d=identicon)[m-porter](/maintainers/m-porter) --- Top Contributors [![M-Porter](https://avatars.githubusercontent.com/u/2313263?v=4)](https://github.com/M-Porter "M-Porter (13 commits)") --- Tags laravelloaderhtmlvuewebpack ### Code Quality Code StylePHP\_CodeSniffer ### Embed Badge ![Health badge](/badges/m-porter-vue-template-loader/health.svg) ``` [![Health](https://phpackages.com/badges/m-porter-vue-template-loader/health.svg)](https://phpackages.com/packages/m-porter-vue-template-loader) ``` ### Alternatives [renatomarinho/laravel-page-speed Laravel Page Speed 2.5k1.7M11](/packages/renatomarinho-laravel-page-speed)[psalm/plugin-laravel Psalm plugin for Laravel 3345.1M337](/packages/psalm-plugin-laravel)[vinkius-labs/laravel-page-speed Laravel Page Speed 2.5k9.6k1](/packages/vinkius-labs-laravel-page-speed)[emargareten/inertia-modal Inertia Modal is a Laravel package that lets you implement backend-driven modal dialogs for Inertia apps. 90128.1k](/packages/emargareten-inertia-modal)[linkxtr/laravel-qrcode A clean, modern, and easy-to-use QR code generator for Laravel 3614.9k](/packages/linkxtr-laravel-qrcode)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 119.2k](/packages/tomshaw-electricgrid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)