I'm using Laravel, Vue, Inertia, and tailwind css as a template for the auth pages.
The code is like this (app.css)
#tailwind base;
#tailwind components;
#tailwind utilities;
The problem is, I have another multiple css files that I have imported to app.js like this
import './bootstrap';
import '../css/app.css';
import '../css/navbar.css';
import '../css/home.css';
import '../css/kenapa.css';
import '../css/ceritakami.css';
import '../css/karir.css';
import '../css/lowongan.css';
import '../css/media.css';
import '../css/gabung.css';
import '../css/mitra.css';
import '../css/download.css';
import '../css/footer.css';
import '../css/login.css';
And so, the tailwind file is messing up my .Vue files.
What should I do to separate them without colliding with each other in app.js ? I'm hoping to achieve that the front end pages is using the CSS files I've created myself, and the auth pages is using the tailwind ones.
Related
In my company we use laravel-blade and vue. It was usually that in blade files there was body with id app, and then there was a <script> new Vue({...}); </script>. In app.js there was window.Vue=require('vue').default;, so that Vue was available in every script. However, I don't know, how can I use Vue in blade file after migrating to Vue 3. I tried to write in my app.js file import createApp from 'vue'; window.createApp = createApp; but I don't even know if it makes sense. Can you give me advice, how excatly can I use Vue 3 in blade scripts?
I have a laravel/VueJs app which was normal until I decided to add Vuetify. After installing the Vuetify package with npm, I imported it via a plugin/vuetify.js folder inside my resources/js folder like so(inside plugin/vuetify.js)
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
export default new Vuetify;
I imported into app.js like so;
import vuetify from './plugin/vuetify'
And in the Vue instance added vuetify;
const app = new Vue({
el: '#app',
router,
vuetify
});
My vuetify components work well but some laravel components like the navbar breaks, the height increasing significantly. When I comment out the vuetify import, it goes back to normal. Can somebody help point out a fix or what am doing wrong please?
Laravel 5.8, vuetify 2.0.7
Vuetify and Bootstrap 4 share some of their css class names. You are trying to use two different css frameworks on the same page. Vuetify is probably getting loaded after bootstrap 4 which means it's overwriting some of bootstraps css.
The easy solution is just to use one or the other for your application. There are libraries for vue that allow you to easily use bootstrap 4 with vue. I've used bootstrap-vue before and it works well.
If you REALLY want to use two different css frameworks on the same page you can load vuetify css inside of a class.
e.g.
app.scss
.my-app {
#import 'vuetify/dist/vuetify.min.css'
}
app.vue
<template>
<div class="my-app">
Everything in here is using vuetify
</div>
</template>
Installed vue js with node modules for laravel 5.4 project but the components are not displayed after I run npm run watch
Installed npm, installed vue.js added vue.js file example in app.js, npm run watch - no result
blade template file
<div id="app">
<h1>Test</h1>
<h2>asda</h2>
<example-component></example-component>
</div>
App.js
import Vue from 'vue';
Vue.component('example-component',
require('./components/ExampleComponent.vue'));
//Set toaster duration
Vue.config.productionTip = false
new Vue({
el: '#app',
components: {
}
})
The component should be loaded after page refresh but is not. No any error messages in console.
If you are using Webpack, you should append the require(...) with .default so it becomes require(...).default. Example in Laravel Git
Make sure that you export default in your components. Example in Laravel Git
I am trying to install mdbootstrap vue into a Laravel 5.6 project, but i realy don't understand how i suppose to do it.
If somebody can give me a little tutorial, it would be nice of you ;-)
Try this(updated)...
(Assuming you have already installed laravel)
Go to your project directory and do:
npm install --save mdbvue
You will also need:
npm install --save-dev babel-preset-stage-2
next go to resources/js/bootstrap.js and under the require('bootstrap'); add require('mdbvue'); it should look something like this:
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('mdbvue'); //<---this is what you need to add
} catch (e) {}
Next go to resources/sass/app.scss and add the MDB css under the bootstrap import, you might also need to import the font-awesome css:
// Material Design Bootstrap
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
#import '~bootstrap/scss/bootstrap';
#import "~mdbvue/build/css/mdb.css";
Now to compile your app.css and app.js files just do npm run dev
With this everything should be up and running and you are free to use MDBvue components or simply use MDB jQuery version.
This worked for me on a Laravel 5.7 project. Hope this helps.
I need to change the application-wide CSS file dynamically for a nativescript app. ( Not the page css file, the application css file)
You can change the app.css file programmatically. In your app.js / app.ts file, add something like:
import application = require("application");
application.cssFile = "style.css";
application.start({ moduleName: "main-page" });
Import application in other places of your application and try to modify cssFile property.
See
https://docs.nativescript.org/ui/styling#application-wide-css