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;