This is an opinionated Laravel frontend setup for using vue-cli with vue-soppy in a Laravel project. You can even run multiple vue-cli projects (eg. app and admin). You can even share tailwindcss config between the two!
Check out this article on Medium to get a better understanding why vue-soppy exists.
- Laravel Installer (optional, but recommended)
- vue-cli
$ laravel new my-project && cd my-project
$ mkdir resources/vue && cd resources/vue/
$ vue create app - Be sure to add vue-router in history mode and vuex
See vue.config.js from this repo. Save it to /resources/vue/app/vue.config.js
See SoppyMakeRoutes.php from this repo. Save it to /app/Console/Commands/SoppyMakeRoutes.php
package.json
{ ... "scripts": { ... "routes": "php artisan soppy:make-routes" "preserve": "npm run routes", "serve": "cd resources/vue/app && yarn serve", "prebuild": "npm run routes", "build": "cd resources/vue/app && yarn build" }, } See AppController.php from this repo. Save it to /app/Http/Controllers/AppController.php
NOTE: The important part is to return JSON when the request wants JSON and the view when it doesn't, like this:
public function someRouteAction(Request $request) { $data = [ // Whatever date you want to be either injected on page load or return as JSON ]; return $request->wantsJson() ? $data : view('app', ['data' => $data]); } routes/web.php
Route::get('/', 'AppController@welcome')->name('app.welcome'); NOTE: The ->name('app.welcome') is important here. The php artisan soppy:make-routes command looks for all the routes with a name that starts with app. so that vue-soppy can use it for your routes in your vue app.
routes/web.php
Route::get('{any?}', 'AppController@maybeJsonResponse')->where('any', '.*')->name('app.notFound'); resources/vue/app/src/router/index.js
// ... const routes = [ { name: 'app.notFound', path: '*', }, ] Add the following to <head> in /resources/vue/app/public/index.html
index.html
<script> window.SoppyState = <% if (NODE_ENV === 'production') { %>@json(array_merge($data, []))<% } else { %>{}<% } %>; </script> 10. Setup vue-soppy
Complete the setup instructions for vue-soppy
Let's say you have an app vue-cli project and you also want an admin vue-cli project. It's really simple:
Start with Step 3 above, but now use admin (or whatever you prefer) instead of app
Step 3
$ cd my-project/resources/vue/$ vue create admin- Again, withvue-routerin history mode andvuex
Step 4
- Change
AREAtoadminand save to/resources/vue/admin/vue.config.js
Step 5 The soppy:make-routes command can take two params. By default, it runs:
soppy:make-routes --prefix=app --dest=resources/vue/app/src/router/routes.json Now, see Step 6 👇🏾
Step 6
"routes:admin": "php artisan soppy:make-routes --prefix=admin" "preserve:admin": "npm run routes:admin", "serve:admin": "cd resources/vue/admin && yarn serve", "prebuild:admin": "npm run routes:admin", "build:admin": "cd resources/vue/admin && yarn build", Step 7 Copy AppController.php and rename it AdminController.php
Step 8 Use admin. instead of app.; For example, ->name('admin.dashboard')
Step 9 Add it to resources/vue/admin/public/index.html instead
Step 10 You may consider installing packages that will be used in both projects in resources/vue/.
$ cd my-project/resources/vue/ $ echo "{}" >> package.json $ npm i --save vue-soggy $ mkdir my-project/resources/vue/shared && cd my-project/resources/vue/ resources/vue/[app/admin]/vue.config.js
modules.export = { // ... configureWebpack: { resolve: { alias: { '@@': path.join(__dirname, '../'), }, }, }, // ... } resources/vue/tailwind.config.js
const path = require('path'); module.exports = { purge: [ path.join(__dirname, './*/src/**/*.html'), path.join(__dirname, './*/src/**/*.js'), path.join(__dirname, './*/src/**/*.vue'), path.join(__dirname, './*/src/**/*.scss'), path.join(__dirname, './shared/**/*.html'), path.join(__dirname, './shared/**/*.js'), path.join(__dirname, './shared/**/*.vue'), path.join(__dirname, './shared/**/*.scss'), ], theme: { extend: {}, }, variants: {}, plugins: [], }; resources/vue/postcss.config.js
const path = require('path'); module.exports = { plugins: [ require('tailwindcss')(path.join(__dirname, './tailwind.config.js')), require('autoprefixer')(), ], }; Set custom config path for postcss in vue.config.js
resources/vue/[app/admin]/vue.config.js
modules.export = { // ... css: { loaderOptions: { postcss: { config: { path: '../postcss.config.js', }, }, }, }, // ... } In each vue-cli project, you'll need to add to the main.js file:
resources/vue/[app/admin]/src/main.js
require('@@/shared/assets/scss/main.scss'); resources/vue/shared/assets/scss/main.scss
/* purgecss start ignore */ @tailwind base; @tailwind components; /* purgecss end ignore */ @tailwind utilities;