This is using Laravel with Vite. I have gone through guides on how to do this from multiple sources, and while there seems to be several different approaches that should work, nothing seems to result in tailwind directives being processed by postcss.
In package.json
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"autoprefixer": "^10.4.7",
"axios": "^0.27",
"laravel-vite-plugin": "^0.4.0",
"lodash": "^4.17.21",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.6",
"vite": "^3.0.0"
},
"dependencies": {
"amqplib": "^0.10.0"
}
}
In vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});
In postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
In tailwind.config.js
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
],
theme: {
extend: {},
},
plugins: [],
}
In resources/css/app.css
#tailwind base;
#tailwind components;
#tailwind utilities;
and finally in app.blade.php
<!DOCTYPE html>
<html land="en">
<head>
<meta charset="UTF-8" />
<meta name="viewpoint" content="width=device-width, initial-scale=1.0" />
<title> ISAD </title>
#vite('resources/css/app.css')
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
Which renders as
<!DOCTYPE html>
<html land="en">
<head>
<meta charset="UTF-8" />
<meta name="viewpoint" content="width=device-width, initial-scale=1.0" />
<title> ISAD </title>
<script type="module" src="http://127.0.0.1:5173/#vite/client"></script><link rel="stylesheet" href="http://127.0.0.1:5173/resources/css/app.css" />
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
With app.css still containing just
#tailwind base;
#tailwind components;
#tailwind utilities;
There is probably something very small that I am overlooking.
This is more than likely because your vite server is being blocked by an adblocker...
Verify by opening the network tab, does the vite server and assets return an err_blocked_by_client?
You more than likely have to whitelist your vite server with your adblocker... You can read more on this issue here: https://github.com/laravel/vite-plugin/issues/47
Just try to re-run Vite if it's running
Ctrl+C to terminate
npm run dev or yarn dev
Related
I followed the instructions from the documentation:
Homestead: https://laravel.com/docs/9.x/homestead#installation-and-setup
Breeze with Vue and inertia: https://laravel.com/docs/9.x/starter-kits#breeze-and-inertia
When I run npm run build everything works fine. I can visit my new app over http://homestead.test/. When I try to use the dev server with hot reload npm run dev, the debug console in my browser (host) tells:
GET http://127.0.0.1:5173/#vite/client net::ERR_CONNECTION_REFUSED
GET http://127.0.0.1:5173/resources/js/app.js net::ERR_CONNECTION_REFUSED
I already tried to change my package.json file to from "dev": "vite", to "dev": "vite --host homestead.test", but this only results in the errors
GET http://homestead.test:5173/#vite/client net::ERR_CONNECTION_REFUSED
GET http://homestead.test:5173/resources/js/app.js net::ERR_CONNECTION_REFUSED
In app.blade.php the scripts are imported with #
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Scripts -->
#routes
#vite('resources/js/app.js')
#inertiaHead
</head>
<body class="font-sans antialiased">
#inertia
</body>
</html>
#routes seems to be a part of the Laravel Ziggy package. No error from this side.
But the #vite('resources/js/app.js') and #inertiaHead are throwing errors. These directives link to a wrong destination.
How to solve this?
I've found the solution. Add the server part in your vite.config.js. And add the app.css to the inputs
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
server: {
hmr: {
host: "192.168.56.56",
},
host: "192.168.56.56",
watch: {
usePolling: true,
},
},
plugins: [
laravel({
input: ['resources/js/app.js', 'resources/css/app.css'],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
My Solution is to turn on the HTTPS with Vite SSL cert generation plugin
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '#vitejs/plugin-react';
import basicSsl from '#vitejs/plugin-basic-ssl'
export default defineConfig({
server: {
https: true,
},
plugins: [
basicSsl(),
laravel({
input: 'resources/js/app.jsx',
refresh: true,
}),
react(),
],
});
I will share a little of my experience when I get a problem like this. This is because the existing IP is not detected on the device.
http://127.0.0.1:5173 that's the route that made this error occur. So I tried building with
npm run build
after that I refreshed my page and the page was successfully opened.
looks like it was not accessible during development stage. that's all I understand. sorry if there is an error that I convey.
I tried to create Laravel project with Vite and followed Laravel documentation. But the problem occurred when I tried to access the resource and it says Configuration "resources/js/app.js" does not exist..
This is vite.config.js file:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue'
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
vue(),
],
});
And this is my blade file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
{{-- #vite('resources/css/app.css') --}}
</head>
<body>
<div id="app"></div>
#vite('resources/js/app.js')
</body>
</html>
Anyone know the problem?
I think you want something like this in vite.config.js.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
],
});
And then make sure that you run npm run build in your terminal.
use #vite('default') in you blade file not : #vite('resources/js/app.js') more info go to :
https://laravel-vite.dev/guide/extra-topics/multiple-configurations.html#configuring-the-laravel-package
I have the following problem which repeats a lot to me when using Vue 3 and Laravel somewhere. I'm just getting started and have a virtually clean app and can still see this issue exist. Namely, Vuejs 3 from Laravel 8 do not work for me.
I get an error in the console:
[Vue warn]: Failed to resolve component: app
at app.js:13797
app.js
require('./bootstrap');
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp({App});
app.mount("#app");
App.vue
<template>
<h1>{{ greeting }}</h1>
</template>
<script>
export default {
setup: () => ({
greeting: 'Hello World from Vue 3!'
})
}
</script>
<style scoped>
</style>
webpack.mix.js
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css', {}, [tailwindcss('./tailwind.config.js')])
.version();
welcome.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="app">
<app>
</app>
</div>
<script src="{{ url('js/app.js') }}"></script>
</body>
</html>
Please help me with this.
:)
It should be createApp(App), not {App}, which is a shorthand for {App: App}.
I have a Laravel Vue project that works fine in development. I have been trying to get it to our production server for some hours now. However, when I visit the URL, I get a blank page. Upon inspection in the console, I notice all the js chunk files return status of 200, but their contents are "We're sorry, but Project Name doesn't work properly without Javascript."
The following is a snippet of my webpack.mix.js.
mix
.js('resources/js/app.js', 'public/js')
.webpackConfig({
resolve: {
alias: {
'#': path.resolve(__dirname, 'frontend/src/'),
'#themeConfig': path.resolve(__dirname, 'frontend/themeConfig.js'),
'#core': path.resolve(__dirname, 'frontend/src/#core'),
'#validations': path.resolve(__dirname, 'frontend/src/#core/utils/validations/validations.js'),
'#axios': path.resolve(__dirname, 'frontend/src/libs/axios')
}
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
{
loader: 'sass-loader',
options: {
sassOptions: {
includePaths: ['frontend/node_modules', 'frontend/src/assets']
}
}
}
]
},
{
test: /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/,
loaders: {
loader: 'file-loader',
options: {
name: 'images/[path][name].[ext]',
context: '../vuexy-vuejs-bootstrap-vue-template/src/assets/images'
// context: 'frontend/src/assets/images'
}
}
}
]
}
})
.sass('resources/sass/app.scss', 'public/css')
.options({
postCss: [require('autoprefixer'), require('postcss-rtl')]
})
// ------------------------------------------------
// If you are deploying on subdomain/subfolder. Uncomment the below code before running the 'yarn prod' or 'npm run production' command.
// Please Change below 'publicPath' and 'setResourceRoot' options as per your sub-directory path.
// ------------------------------------------------
if (mix.inProduction()) {
mix.version()
mix.webpackConfig({
output: {
publicPath: '/app/',
chunkFilename: 'js/chunks/[name].[chunkhash].js'
}
})
mix.setResourceRoot('/app/')
}else{
mix.webpackConfig({
output: {
chunkFilename: 'js/chunks/[name].js'
}
})
}
I set up production using the ff on my local machine:
npm run prod
Then I run the following via ssh on the server:
composer install --optimize-autoloader --no-dev
php artisan key:generate
In the console, the js chunk files show this as their response from the server:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="csrf-token" content="j9kLqaAInZ4043rRqT9Zn3kNMHaSfCdF7h5ejnnZ">
<link rel="icon" href="/favicon.ico">
<title>project Title</title>
<link rel="stylesheet" href="https://app.myprojects.com/css/app.css?id=bff15ac59733e85aedce">
<link rel="shortcut icon" href="https://app.myprojects.com/images/logo/favicon.png">
</head>
<body>
<noscript>
<strong>We're sorry but this platform doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
</div>
<script src="https://app.myprojects.com/js/app.js?id=a74eb61fbd09ea2e1e92"></script>
</body>
</html>
Any help would be appreciated!
Upon lots of further investigations, i noticed that both app.css and app.js loads properly and only the chunk files had the issue. Apparently they were loading from
https://app.myproject.com/app/js/chunks/1.edcb1b13fece690b424f.js
instead of from
https://app.myproject.com/js/chunks/1.edcb1b13fece690b424f.js
I was able to get the page to load properly by setting publicPath and resourceRoot to /
I just did a fresh install of Laravel 6.1 and ran
composer require laravel/ui
php artisan ui vue
npm install && npm run dev
But when looking at my page in the browser I see that the Vue component is not displayed and Vue isn't even loaded at all. I have the following errors in my DOM.
Are these the reason that Vue isn't loading? And how do I solve them? The url should be http://localhost/laravel_applications/webgame/public/css/app.css and http://localhost/laravel_applications/webgame/public/js/app.js how can I change this? I'm running it on Xammp and it's in the htdocs folder under /laravel_applications/webgame. I tried changing the APP_URL in the env file to
APP_URL=http://localhost/laravel_applications/webgame/public
but that did not work.
Vue is installed in my project and my app.js looks like this
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue';
// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
Vue.component('application', require('./components/application.vue').default);
const app = new Vue({
el: '#app',
});
I have an components/application.vue that looks like this
<template>
<div>
Test
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
And a welcome.blade.php that looks like this
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SPA</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="{{ mix('css/app.css') }}" />
<script defer src="{{ mix('js/app.js') }}"></script>
</head>
<body>
<div id="app">
<application></application>
</div>
</body>
</html>
My package.json looks like this
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "7.*",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"vue-router": "^3.1.3"
}
}
And this is my mixin file
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
you don't need to put
APP_URL=http://localhost/laravel_applications/webgame/public
laravel has helper asset() which is point to public folder of laravel so anything inside you public dir you can load via asset() function
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SPA</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/app.css') }}" />
<script defer src="{{ asset('js/app.js') }}"></script>
</head>
<body>
<div id="app">
<application></application>
</div>
</body>
</html>
ref link https://laravel.com/docs/master/helpers#method-asset