I am trying to pass an arbitrary class for bg image bg-[url('/img/footer-artist-pics.jpg')] for a laravel component but classes for bg-image is not added by tailwindCss JIT.
<x-section class="bg-gray-100 bg-[url('/img/footer-artist-pics.jpg')] bg-no-repeat bg-bottom bg-center">
</x-section>
The same thing works if I use a div bg-[url('/img/footer-artist-pics.jpg')]
<div class="bg-gray-100 bg-[url('/img/footer-artist-pics.jpg')] bg-no-repeat bg-bottom bg-center">
</div>
I am using a simple blade file for this component with merge attribute on class
<div {{ $attributes->merge(['class' => 'py-10']) }}>
{{ $slot }}
</div>
webpack config
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css').options({
postCss: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
],
});
Tw config
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [require('#tailwindcss/forms')],
};
I am using
Laravel 9 (Laravel Mix v6.0.43) with Tailwind 3 and scss
If you need to make sure Tailwind generates certain class names that don’t exist in your content files, use the safelist option
module.exports = {
content: [
// ...
],
safelist: [
'bg-gray-100',
'bg-whatever-image',
],
// ...
}
What if you pass the url /img/footer-artist-pics.jpg as a prop to the blade component instead and then use it in the main class with binding?
Maybe something like:
$url = '/img/footer-artist-pics.jpg';
<x-section :url="$url" />
And in x-section component:
<div class="bg-[{{ url($url) }}]">
... many things ...
</div>
Related
i installed jetstream in laravel 8 by using documentation but it not displayed proper way.
here is the tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
`/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [require('#tailwindcss/forms'), require('#tailwindcss/typography')],
};
First finish your installation then compile assets:
npm install
npm run dev
Php artisan migrate
Afterwards still if it did not work
At the style section of app.blade.php you might be missing:
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
I have installed tailwindcss in a Laravel 9 project and trying to add custom colors. Then added this in webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require("tailwindcss"),
]);
To add the custom colors, I have added the colors in my tailwind.config.js file like this
const colors = require('tailwindcss/colors');
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
color: {
transparent: 'transparent',
current: 'currentColor',
'blue': '#71BBE2',
'orange': '#E28333',
'black': '#242121',
'gray': '#242121CC',
'lemon': '#C3D14A',
'green': '#88B667',
'lime': '#F8FFF4',
'purple': '#9D2883',
'white': '#FFFFFF'
},
extend: {},
},
plugins: [],
}
I have npm run watch running and I can see that laravel mix compiled successfully. Now when I use bg-orange in my view file like this
<nav class="bg-orange">
<div class="mx-32 py-2">
//....
</div>
</nav>
the color does not show in the browser and looking at the dev tools I cannot see the color appended to the bg prefix
<nav class="bg-">
<div class="mx-32 py-2">
//....
</div>
</nav>
Any idea what the issue could be?
Change color to colors.
theme: {
// the line below
color: { ...
I have a PHP project with Laravel and Vue.js
I want to handle Admin and Client separately. So I need to add 1 Vue Instance. But I don't know how to create and configure it. Please help me to solve this problem. Thank you very much.
mix
.js('resources/js/admin.js', 'public/js').vue()
.js('resources/js/client.js', 'public/js').vue()
On your blade file, inject proper js file like:
#if (str_contains(Route::currentRouteName(), "admin"))
<script src="{{ asset('js/admin.js') }}" defer></script>
#else
<script src="{{ asset('js/clients.js') }}" defer></script>
mix.js('resources/front/js/app.js', 'public/js').vue()
.sass('resources/front/css/app.scss', 'public/css')
.options({
autoprefixer: {
options: {
browsers: [
'last 6 versions',
]
}
}
})
mix.browserSync('your_site')
mix.js('resources/admin/js/adminapp.js', 'public/js').vue()
.sass('resources/admin/css/adminapp.scss', 'public/css')
.options({
autoprefixer: {
options: {
browsers: [
'last 6 versions',
]
}
}
})
mix.browserSync('your_site/admin')
Is it possible to use Typescript in Vue single file components (SFC) when using Laravel Mix?
If so, how should this be set up?
I'm currently using Laravel Mix 5.0, Typescript 3.7.5 and Vue 2.5.17.
I have a single file component written in Typescript, e.g. SingleFileComponent.vue:
<template>
<div>
<ul
v-for="item in items"
v-bind:key="item.id">
<li>{{ item.message }}</li>
</ul>
</div>
</template>
<script lang="ts">
import Axios from 'axios';
export default {
data() {
return {
items: [],
}
},
mounted() {
Axios.get('/api/get-stuff').then(res => {
this.items = res.data;
})
},
}
</script>
This is what I have configured in webpack.mix.js:
const mix = require('laravel-mix');
mix.ts('resources/js/app.ts', 'public/js')
.webpackConfig({
resolve: {
extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"]
}
});
Running npm run watch results in the following error:
ERROR in /path-to-file/SingleFileComponent.vue.ts
[tsl] ERROR in /path-to-file/SingleFileComponent.vue.ts(21,12)
TS2339: Property 'items' does not exist on type '{ data(): { items: never[]; }; mounted(): void; }'.
When using SFC with Typescript you should extend:
<script lang="ts">
import Axios from 'axios';
import Vue from 'vue';
export default Vue.extend({
...
})
</script>
My vue component like this :
<template>
<ul class="nav nav-tabs nav-tabs-bg">
<li role="presentation" v-for="item in tabs">
1. failed -> {{ item.name }} 2.success -> {{trans('purchase.payment.tab')}}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
tabs: [
{name: "trans('purchase.payment.tab')"}
]
}
}
}
</script>
My lang in laravel(resources/lang/en/purchase.php) like this :
<?php
return [
'payment' => [
'tab' => 'Payment Status',
],
...
];
If the component vue executed, the result like this :
failed -> trans('purchase.payment.tab') 2.success -> Payment Status
So, if trans used in data, it does not work
How can I solve this problem?
Is not possible to use a PHP helper inside JavaScript. But, you can create an object of translations.
In your AppServiceProvider (you can create a new one if you want):
// Don't forget to import the facade
use Illuminate\Support\Facades\Lang;
public function boot() {
$translations = [
'auth' => Lang::get('auth'),
'pagination' => Lang::get('pagination'),
'passwords' => Lang::get('passwords'),
'validation' => Lang::get('validation'),
];
view()->share('translations', json_encode($translations));
}
In your HTML (I suggest header) you can just call:
window.app = {
translations: {!! $translations !!},
}
And to access using in JS, you can just do this, for example:
this.app.translations.auth.throttle // Too many login attempts. Please try again in :seconds seconds.
I use vue-i18n for that. That way you should make its own dictionary.
I made a i18n/en.js file;
module.exports = {
login: {
title: 'Login',
loginButton: 'Login',
emailInput: 'email',
passwordInput: 'password',
},
Form: {
title: 'Form',
}
}
and a i18n/hu.js with the same variables in Hungarian. Then I made a i18n/map.js file:
var en = require('./en.js');
var hu = require('./hu.js');
module.exports = {
en,
hu,
}
and finally, set it in vue.js, check my app.js file part:
require('./bootstrap'); // vue comes from here
import VueI18n from 'vue-i18n'
import dictionary from './i18n/map'
var localeTmp = document.documentElement.lang;
var locale = "hu";
if(localeTmp) {
locale = localeTmp
}
const i18n = new VueI18n({
locale: locale, // set locale
dictionary, // set map of dictionary
})
....
const app = new Vue({
el: 'app',
i18n,
});
Its a very elegant way.
and how I use in component? simple:
....
<md-input-container>
<md-icon>person</md-icon>
<label>{{ $t("loginForm.emailInput") }}</label>
<md-input email name="email" required v-model="email" />
</md-input-container>
....