I'm working on a Laravel project and I'm using Tailwind CSS for it.
What I'm trying to do is to add a costume color in order to use it in the class in the HTML just like it is said in the documentation: https://tailwindcss.com/docs/background-color
I have added a color like this:
tailwind.config.js
theme: {
extend: {
fontFamily: {
sans: ["Nunito", ...defaultTheme.fontFamily.sans],
},
colors: {
emerald: "#2dd4bf",
},
},
},
page.blade.php
<nav class:"bg-emerald">
....
</nav>
The color of the navbar won't change.
How can I fix it?
try executing (in the terminal)
npm run watch
or
npm run dev
Related
I have read the docs and dozens f stackoverflow topics about implementing CKeditor with the upload adapter CKfinder. But none are in vue. Only about CKeditor but nothing about the CKfinder. The docs are so unclear to me and I have read some other topics complaining about it too. So I hope someone here can help me to understand how this works.
So this is what I have right now:
<template>
<section class="j-input-text-editor row">
<label v-if="label" :class="label_class">
{{label}}
</label>
<div :class="input_class">
<ckeditor ref="editor" :editor="editor" v-model="mValue" #input="updateValue"></ckeditor>
</div>
</section>
</template>
<script>
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
export default {
name: "textEditor",
data() {
return {
mValue: '',
editorData: '<p>Content of the editor.</p>',
editor: ClassicEditor,
}
},
created() {
ClassicEditor
.create( this.$refs.editor, {
ckfinder: {
uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json' // here you can set your own file path
}
} )
.then(console.log('yeay'))
.catch(console.log('error'));
},
}
</script>
So i tried uploading an image in the editor and i get this:
Like I said. I'm totally stuck at this point and bin trying sins friday (weekend I had not to work obviously)
P.S. am also using laravel, do I need something in the back-end?
P.S.S. My english is not the best, I know. If I need to explain more clear what my problem is then I will try my best to do that for you.
You could install CKeditor. You can download it from: https://ckeditor.com/ckfinder/download/
They have a Laravel package as well: https://github.com/ckfinder/ckfinder-laravel-package
I want to change the background color of my data table as a whole. I don't want to use the dark themed or light themed. I can't seem to change it even when using !important or using available classes.
Just add the relevant color class e.g. class="primary" or the name of the color from the vuetify color pack.
<v-data-table class="elevation-1 primary"></v-data-table>
Add a custom class to v-data-table tag like this:
<v-data-table ... class="elevation-1 test" ...>
elevation-1 is their standard class name. I added test to illustrate the point.
Add necessary styling to .test .theme--light.v-table selector in your custom CSS.
E.g. .test .theme--light.v-table { background-color: #00f; }
You may need to replace the theme name in the CSS path with your theme name.
If you look inside the DOM, you'll notice that class name test was applied to a <div> container, not the <table> element.
A simple way to include your CSS is with <style> tag inside your App.vue file:
<style>
#import './assets/styles/yourstyles.css';
</style>
How to include css files in Vue 2 has more on that.
You can use headers object to specify class as below,
headers: [{
text: 'Dessert (100g serving)',
align: 'start',
divider: true,
sortable: false,
value: 'name',
class: "blue lighten-5"
},
{
text: 'Calories',
value: 'calories',
align: 'center',
divider: true,
class: "blue lighten-5"
}]
The above code will add light blue background to your header. You can do more with the class attr in headers object
The current answers weren't working for my but I found a simple solution. I'll share it just in case anyone sees this in the future.
# 1. Add a class to the table element
<v-simple-table class="table">
...
</v-simple-table>
# 2. Add background color
<style scoped>
.table {
background-color: red;
}
</style>
I want to import this library into my laravel project. I have run npm install vue-simple-lightbox and then in my blade template i have this code
#extends('layouts.app')
#section('content')
{{-- some html code --}}
<div class="row">
</div>
<div class="row">
<lightbox id="mylightbox" :images="images" :image_class="'img-responsive img-rounded'" :album_class=" 'my-album-class' " :options="options"></lightbox>
{{-- more html code --}}
</div>
#endsection
<style type="text/css">
.dropdown, .dropdown-menu {
width: 100%;
}
</style>
#section('scripts')
// import the library here?
<script type="text/javascript">
let app = new Vue({
el: '#app',
data() {
return {
images : [
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img1.jpg',
title : 'Image 2'
},
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img2.jpg',
title : 'Image 3'
},
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img3.jpg',
title : ''
},
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img4.jpg',
title : ''
},
],
options : {
closeText : 'X'
}
};
},
mounted() {
},
});
</script>
#endsection
Where should i import the library? I tried to import it into app.js file using this code window.Lightbox = require('vue-simple-lightbox');, but then how do i use it? It seems the blade template have no idea what is 'lightbox'.
I am getting this error
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
What is the correct way of importing the library and then use it inside the blade template? Thanks!
Extract your js code to a single file, blade templates are not compiled and it wont work if you import it there.
So copy everything over to say, app.js, then include it via a script tag
Inside app.js you can import lightbox from 'vue-simple-lightbox'
Now, make sure you add it to your webpack.mix file through
.js('path/to/app.js', 'public/js/app.js')
That way the library will get compiled into the asset.
Now, regarding the VUE tempalte not finding the lightbox component.
You forgot to add the component part of the Vue instance:
import Lightbox from 'vue-simple-lightbox'
export default {
components: {
Lightbox //HERE
},
...
You can import the file directly from GitHub:
<script src="https://github.com/vrajroham/vue-simple-lightbox/blob/master/dist/vue-simple-lightbox.js"></script>
Is there any way to reload the sidebar component from other vue component ?
I got a menuLabel at the sidebar which will show the number of order in pending status. So I want to update the sidebar menuLabel whenever I change the status from pending to others.
For example, When I click submit or some button in SalesOrder.vue, I want to reload the sidebar.
Sample component code:
export const Routes = [
{
path: '/admin',
components: { default: ThemeContent, header: ThemeHeader, sidebar: ThemeSidebar, footer: ThemeFooter },
children: [
{ path: 'dashboard', component: DashboardAdmin },
{ path: 'salesorder', component: SalesOrder},
],
meta: { requiresAdmin: true }
},
You can separate 1st sidebar to external component and 2nd to another. Then include both components to your sidebar block and hide/show them whenever you want.
<sidebar>
<first-sidebar :trigger="boolean"></first-sidebar>
<second-sidebar :trigger="boolean"></second-sidebar>
</sidebar>
Then in your first sidebar component
<template>
<div v-if="trigger">
<!-- ... -->
</div>
</template>
<script>
export default {
props: ['trigger']
}
</script>
And finally second sidebar component
<template>
<div v-if="!trigger">
<!-- ... -->
</div>
</template>
<script>
export default {
props: ['trigger']
}
</script>
Thanks everyone for helping me, I have found a way for me to interact from one component to another which is using a bus event vuejs.
https://alligator.io/vuejs/global-event-bus/
I have the following in my code. Having the option
legend: {show:true}
messes up the chart badly. The legend section is so long
and there is no chart.
I have pasted the image here of how the chart looks :
http://tinypic.com/view.php?pic=2eqgbgy&s=7
It shows fine without the legend option though, but chart is of course without the legend.
In Chrome I see the following exception
Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1
<script type="text/javascript">
line2 = [['Living Expenses',1000], ['Loans',2000], ['Credit
Card',500]];
$j(document).ready(function() {
$j.jqplot.config.enablePlugins = true;
$j.jqplot('piechartdiv', [line2], {
title: 'Where is my money going?',
seriesDefaults:{renderer:$j.jqplot.PieRenderer,
rendererOptions:{sliceMargin:8}}, legend:{show:true}
});
});
</script>
<div style="width: 450px;margin: 0px auto;">
<div id='piechartdiv'></div>
</div>
Any help appreciated.
Are you using Bootstrap or some other CSS reset library?
If you go into firebug, and select the <table class="jqplot-table-legend" ...> element, you'll probably see that there is a width:100% default property set the table elements. You can fix it in your CSS layout:
#piechartdiv table.jqplot-table-legend {
width:auto;
}
The only thing that seems weird to me is this:
$j.jqplot
Why are there some J's on your code?, besides that, everything seems to be fine, maybe try putting a location on the legend to see if that fix the issue, here is an example:
plot = $.jqplot('chart2', [arr], {
grid: {
drawBorder: true,
drawGridlines: false,
background: '#FFFFFF',
shadow: true
},
seriesDefaults: {
renderer: $.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true
}
},
legend: {
show: true,
location: 'e'
}
});
Have you included the jqplot.css file in your code.
Make sure that it is included in the code, and that the file is also present in the directory you are referring to.
Thank you
I came across something similar.
try checking css property text-align:left
<div id='piechartdiv' style="text-align:left;"></div>
I'm afraid I don't know why but these fixed the error for me