Skip to content

Instantly share code, notes, and snippets.

@owenconti

owenconti/0281fb4c-c3be-4349-96ae-2895f44c34a0.js

Created February 21, 2021 19:32
Show Gist options
  • Save owenconti/3c40456e18bdffed7a0960dcdb00f8b4 to your computer and use it in GitHub Desktop.
Save owenconti/3c40456e18bdffed7a0960dcdb00f8b4 to your computer and use it in GitHub Desktop.
Download ZIP
Replacing Laravel Mix with Vite
Raw
0281fb4c-c3be-4349-96ae-2895f44c34a0.js
import { createVuePlugin as Vue2Plugin } from 'vite-plugin-vue2';
const { resolve } = require('path');
const Dotenv = require('dotenv');
Dotenv.config();
const ASSET_URL = process.env.ASSET_URL || '';
export default {
plugins: [
Vue2Plugin(),
],
root: 'resources',
base: `${ASSET_URL}/dist/`,
build: {
outDir: resolve(__dirname, 'public/dist'),
emptyOutDir: true,
manifest: true,
target: 'es2018',
rollupOptions: {
input: '/js/app.js'
}
},
server: {
strictPort: true,
port: 3000
},
resolve: {
alias: {
'@': '/js',
}
},
optimizeDeps: {
include: [
'vue',
'portal-vue',
'@inertiajs/inertia',
'@inertiajs/inertia-vue',
'@inertiajs/progress',
'axios'
]
}
}
Raw
0d25aa35-1d27-4500-bc34-88687c4a2c6d.js
import vue from '@vitejs/plugin-vue';
const { resolve } = require('path');
const Dotenv = require('dotenv');
Dotenv.config();
const ASSET_URL = process.env.ASSET_URL || '';
export default {
plugins: [
vue(),
],
root: 'resources',
base: `${ASSET_URL}/dist/`,
build: {
outDir: resolve(__dirname, 'public/dist'),
emptyOutDir: true,
manifest: true,
target: 'es2018',
rollupOptions: {
input: '/js/app.js'
}
},
server: {
strictPort: true,
port: 3000
},
resolve: {
alias: {
'@': '/js',
}
},
optimizeDeps: {
include: [
'vue',
'@inertiajs/inertia',
'@inertiajs/inertia-vue',
'@inertiajs/progress',
'axios'
]
}
}
Raw
1b4f2093-0ee0-407d-ba5a-3831cd62de06.sh
npm uninstall laravel-mix
rm webpack.mix.js
Raw
6547ce71-2da0-43f9-958c-c8336ad925f8.sh
composer require ohseesoftware/laravel-vite-manifest
Raw
881238a5-bc40-4cb9-9169-8c7f64a032f2.env
// Running locally
APP_ENV=local
ASSET_URL=http://localhost:3000
// Running production build
APP_ENV=production
ASSET_URL=https://your-asset-domain.com
Raw
9aea3629-17a8-4779-a13c-55fefd8736f5.js
"scripts": {
"start": "vite",
"production": "vite build"
},
Raw
a37567b8-52a9-4dda-b165-3698b19a60ba.js
// postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]
}
Raw
cf7d9f54-fdf3-48f0-bf09-f4b5cf86f86c.sh
npm install --save-dev vite @vitejs/plugin-vue dotenv @vue/compiler-sfc
Raw
d0ea783b-b8d2-487d-886a-ead6e2ab85d1.html
// app.blade.php
<head>
// ... rest of head contents here
@vite
</head>
@MotionPhix
Copy link

How about frontend imports? How do we transform those? I mean something like:

<link rel="stylesheet" type="text/css" href="{{ mix('css/mail.css') }}">

How does that change with vite?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment