Skip to content

Instantly share code, notes, and snippets.

@owenconti
Last active March 19, 2022 12:10
Show Gist options
  • Save owenconti/962c26d0e158435746d2d08d8cb868ba to your computer and use it in GitHub Desktop.
Save owenconti/962c26d0e158435746d2d08d8cb868ba to your computer and use it in GitHub Desktop.
Replacing Laravel Mix with Vite
// Vue 2
npm install --save-dev vite vite-plugin-vue2 dotenv @vue/compiler-sfc
// Vue 3
npm install --save-dev vite @vitejs/plugin-vue dotenv @vue/compiler-sfc
composer require ohseesoftware/laravel-vite-manifest
optimizeDeps: {
include: [
'vue',
'portal-vue', // Vue 2
'@inertiajs/inertia',
'@inertiajs/inertia-vue', // Vue 2
'@inertiajs/inertia-vue3', // Vue 3
'@inertiajs/progress',
'axios'
]
}
server: {
strictPort: true,
port: 3000
},
// package.json
"scripts": {
"start": "vite",
"production": "vite build"
},
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'
]
}
}
// app.js
import '../css/app.css';
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-vue3',
'@inertiajs/progress',
'axios'
]
}
}
const { resolve } = require('path');
// ...
build: {
outDir: resolve(__dirname, 'public/dist'),
emptyOutDir: true,
manifest: true,
target: 'es2018',
rollupOptions: {
input: '/js/app.js'
}
},
// app.blade.php
<head>
// ... rest of head contents here
@vite
</head>
npm uninstall laravel-mix
rm webpack.mix.js
rm webpack.config.js
// ...
base: `${ASSET_URL}/dist/`,
// Add the polyfill for dynamic imports to the top of your entry .js file
import 'vite/dynamic-import-polyfill';
// Change how dynamic pages are loaded
const pages = import.meta.glob('./Pages/**/*.vue');
// Update the `resolveComponent` logic
resolveComponent: name => {
const importPage = pages[`./Pages/${name}.vue`];
if (!importPage) {
throw new Error(`Unknown page ${name}. Is it located under Pages with a .vue extension?`);
}
return importPage().then(module => module.default);
}
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-vue3',
'@inertiajs/progress',
'axios'
]
}
}
resolve: {
alias: {
'@': '/js',
}
},
// postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss')
]
}
// postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss')
]
}
// app.blade.php
<head>
// ... rest of head contents here
@vite
</head>
import 'vite/dynamic-import-polyfill';
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import axios from 'axios';
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
import '../css/app.css';
InertiaProgress.init();
const app = document.getElementById('app');
const pages = import.meta.glob('./Pages/**/*.vue');
createApp({
render: () =>
h(InertiaApp, {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: name => {
const importPage = pages[`./Pages/${name}.vue`];
if (!importPage) {
throw new Error(`Unknown page ${name}. Is it located under Pages with a .vue extension?`);
}
return importPage().then(module => module.default)
}
}),
})
.mixin({ methods: { route } })
.use(InertiaPlugin)
.mount(app);
// Vue 2
import { createVuePlugin as Vue2Plugin } from 'vite-plugin-vue2';
export default {
plugins: [
Vue2Plugin(),
]
}
// Vue 3
import vue from '@vitejs/plugin-vue';
export default {
plugins: [
vue(),
]
}
// Running locally
APP_ENV=local
ASSET_URL=http://localhost:3000
// Running production build
APP_ENV=production
ASSET_URL=https://your-asset-domain.com
npm install --save-dev vite @vitejs/plugin-vue dotenv @vue/compiler-sfc
composer require ohseesoftware/laravel-vite-manifest
// Running locally
APP_ENV=local
ASSET_URL=http://localhost:3000
// Running production build
APP_ENV=production
ASSET_URL=https://your-asset-domain.com
@owenconti
Copy link
Author

Where does route come from?

https://gist.github.com/owenconti/962c26d0e158435746d2d08d8cb868ba#file-d12e1f81-91b0-4593-97ee-05415903833e-js-L31

@sagalbot From Ziggy: https://github.com/tighten/ziggy#the-route-helper - I believe you could import it too, but by default it exposes a global on window

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