Laravel: local css for body and html tag in vue file

1
votes

I have a laravel vue project in which I want a local css to the html and body tag so that I can vertical align the form.

Since the vue file renders from the blade file, the css I add in the style tag within vue file does not work for the html and body tag.

How can I add local css to the html and body tag in vue component file?

Please help me.

LoginComponent.vue

<template>
    <form class="form-signin text-center my-auto">
        <img
            class="mb-4"
            src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg"
            alt=""
            width="72"
            height="72"
        />
        <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input
            type="email"
            id="inputEmail"
            class="form-control"
            placeholder="Email address"
            required
            autofocus
        />
        <label for="inputPassword" class="sr-only">Password</label>
        <input
            type="password"
            id="inputPassword"
            class="form-control"
            placeholder="Password"
            required
        />
        <div class="checkbox mb-3">
            <label>
                <input type="checkbox" value="remember-me" /> Remember me
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">
            Sign in
        </button>

    </form>
</template>

<script>
export default {};
</script>

<style scoped>
html,
body {
    height: 100%;
}

body {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f5f5f5;
}

.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .checkbox {
    font-weight: 400;
}
.form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
</style>

welcome.blade.php

 <body>
        <div id="app">
           
        </div>
        <script src="{{ asset('js/app.js') }}"></script>
 </body>
2
phpcsslaravelvue.js

2 Answers

0
votes

Your css is scoped, so only the local component is using it. See scoped css:

When a tag has the scoped attribute, its CSS will apply to elements of the current component only.

You could add your css to a css file to have a cleaner code and not have a scoped css :

//assets/css/login.css
html,
body {
    height: 100%;
}

body {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f5f5f5;
}

.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .checkbox {
    font-weight: 400;
}
.form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

And then you can import in in your component :

<style src="@/assets/css/login.css"></style>
0
votes

try this may be it can do the job

  beforeCreate: function() {
        document.body.className = 'local';
    }


<style>
.local{
    height: 100%;
}

.local{
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f5f5f5;
}
</style>

or you can try like this

beforeCreate: function() {
      document.body.display =  "-ms-flexbox";
      document.body.display =  "-webkit-box";
      document.body.display =  "flex";
      document.body.alignItems =  "center";
      document.body.justifyContent =  "center";
      document.body.paddingTop =  "40px";
      document.body.paddingBottom =  "40px";
      document.body.backgroundColor =  "#f5f5f5";
    }