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')
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 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>
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 am trying to load a global sass variable file into my Vue style tags. If I am understanding globalVueStyles right, this should Indicate a file to include in every component style. But when I set it up it seems to not do anything and when I run npm run dev I get an undefined variable error.
Here is my laravel mix code:
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/main.scss', 'public/css')
.options({
extractVueStyles: true,
globalVueStyles: 'resources/sass/utils/_variables.scss',
})
.version()
after doing this I thought I should have access to my variables in my .vue files by doing this:
<template>
<h1>Example Component hi test</h1>
</template>
<script>
export default {
}
</script>
<style lang="scss">
h1 {
font-size: 50px;
color: $blue;
}
</style>
And here is the error I am getting:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
4 │ color: $blue;
│ ^^^^^
╵
resources/js/components/HelloWorld.vue 4:11 root stylesheet
I'm sure I'm missing something, but any help on this would be appreciated.
I was led to answer from https://github.com/JeffreyWay/laravel-mix/issues/2896;
they seemed to upgrade the syntax the documentation can be found here:
https://github.com/JeffreyWay/laravel-mix/blob/467f0c9b01b7da71c519619ba8b310422321e0d6/UPGRADE.md#vue-configuration
When I tried your solution it did not work.
Here is how I managed to fix this issue, using this new/changed property additionalData, in previous versions this property was data or prependData.
mix.webpackConfig({
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "sass-loader",
options: {
additionalData: `#import "#/_variables.scss";
#import "#/_mixins.scss";
#import "#/_extends.scss";
#import "#/_general.scss";`
},
},
],
}
]
},
resolve: {
alias: {
'#': path.resolve('resources/sass'),
'~': path.resolve('/resources/js'),
'Vue': 'vue/dist/vue.esm-bundler.js',
}
},
output: {
chunkFilename: '[name].js?id=[chunkhash]',
},
});
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/sass/app.scss', 'public/css')
.copyDirectory('resources/images', 'public/images');
if (mix.inProduction()) {
mix.version();
}
Note that alias for path 'resources/scss' is "#".
I hope this saved someone some time :)
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>