I'm trying to make a create a form with i18n translation.
I already tried that but it's not working :
<div id="form" align="center"
justify="center">
<v-col sm="4" align="center"
justify="center">
<v-form
ref="form"
v-model="valid"
lazy-validation
>
<v-text-field
v-model="login"
label="{{ $t('Username') }}"
required
></v-text-field>
<v-text-field
v-model="password"
label="{{ $t('Password') }}"
type="password"
required
></v-text-field>
<v-btn
color=blue
class="mr-4"
#click="validate"
>
{{ $t('Login') }}
</v-btn>
</v-form>
</v-col>
</div>
Do someone have any idea to translate the labels on my form ?
Thank you
Try something like :label="$t('your.translation.key')"
Related
<template> <!--HomeView-->
<v-layout>
<v-col class="ma-0 pa-0">
<v-img
class="bg-white"
:aspect-ratio="1"
src="https://images7.alphacoders.com/952/952959.jpg"
cover
></v-img>
</v-col>
<v-col class="ma-0 pa-0 bg-something d-flex align-center justify-center">
<v-card>
<InputComp />
</v-card>
</v-col>
</v-layout>
</template>
Inputcomp
<template>
<v-sheet class="bg-something pa-12" rounded>
<v-card class="mx-auto px-6 py-8 bg-somethingElse">
<v-form v-model="form" #submit.prevent="onSubmit">
<v-text-field
v-model="email"
:readonly="loading"
:rules="[required]"
class="mb-2"
clearable
label="Email"
></v-text-field>
<v-text-field
v-model="password"
:readonly="loading"
:rules="[required]"
clearable
label="Password"
placeholder="Enter your password"
></v-text-field>
<br />
<v-btn
:disabled="!form"
:loading="loading"
block
color="something"
size="large"
type="submit"
variant="elevated"
>
Sign In
</v-btn>
</v-form>
</v-card>
</v-sheet>
</template>
div photo
I add d-flex and my Card element is restricted. I want to both align and center. I tried it with you, can you help me?
Error clears when removing d flex and align-items. When removing align-items, the bottom of the card becomes white. Separated from the Card Grid
I have a small problem, don't understand how to connect the frontend and backend so email and password are verified from the database. I have programmed this in Vue.js for Login and Register page. And now I need to connect it with API so data is verified from the database and it is hard quite hard for me to understand it because I am learning Vue now.
<template>
<v-app id="inspire">
<v-content>
<v-container class="fill-height" fluid>
<v-row align="center" justify="center">
<v-col cols="12" sm="8" md="8">
<v-card class="elevation-12">
<v-window v-model="step">
<v-window-item :value="1">
<v-row>
<v-col cols="12" md="8">
<v-card-text class="mt-12">
<div>
<section>
<iframe width="600" height="315" src="https://www.youtube.com/embed/ebuUqH4ZVUQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
</div>
<h1
class="text-center display-2 teal--text text--accent-3"
>Sign in to Tetris</h1>
<h4 class="text-center mt-4">Ensure your email for registration</h4>
<v-form>
<v-text-field
label="Email"
name="Email"
prepend-icon="email"
type="text"
color="teal accent-3"
/>
<v-text-field
id="password"
label="Password"
name="password"
prepend-icon="lock"
type="password"
color="teal accent-3"
/>
</v-form>
</v-card-text>
<div class="text-center mt-3">
<v-btn rounded color="teal accent-3" dark>SIGN IN</v-btn>
</div>
</v-col>
<v-col cols="12" md="4" class="teal accent-3">
<v-card-text class="white--text mt-12">
<h1 class="text-center display-1">Hello, Friend!</h1>
<h5
class="text-center"
>Enter your personal details and start journay with us</h5>
</v-card-text>
<div class="text-center">
<v-btn rounded outlined dark #click="step++">SIGN UP</v-btn>
</div>
</v-col>
</v-row>
</v-window-item>
<v-window-item :value="2">
<v-row class="fill-height">
<v-col cols="12" md="4" class="teal accent-3">
<v-card-text class="white--text mt-12">
<h1 class="text-center display-1">Welcome Back!</h1>
<h5
class="text-center"
>To Keep connected with us please login with your personnel info</h5>
</v-card-text>
<div class="text-center">
<v-btn rounded outlined dark #click="step--">Sign in</v-btn>
</div>
</v-col>
<v-col cols="12" md="8">
<v-card-text class="mt-12">
<h1 class="text-center display-2 teal--text text--accent-3">Create Account</h1>
<h4 class="text-center mt-4">Ensure your email for registration</h4>
<v-form>
<v-text-field
label="Name"
name="Name"
prepend-icon="person"
type="text"
color="teal accent-3"
/>
<v-text-field
label="Email"
name="Email"
prepend-icon="email"
type="text"
color="teal accent-3"
/>
<v-text-field
id="password"
label="Password"
name="password"
prepend-icon="lock"
type="password"
color="teal accent-3"
/>
</v-form>
</v-card-text>
<div class="text-center mt-n5">
<v-btn rounded color="teal accent-3" dark>SIGN UP</v-btn>
</div>
</v-col>
</v-row>
</v-window-item>
</v-window>
</v-card>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</template>
<script>
export default {
data: () => ({
step: 1
}),
props: {
source: String
}
};
</script>
I think you need to know what is client, server and how they work via the HTTP protocol in the case you mentioned.
Then, search the documentation, you could find the usage code.
When I test my app in mobile portrait mode it looks like this:
Mobile portrait
But I'm trying to make it look like this from Vuetify
In landscape its fantastic, portrait no luck. I'm using fluid and fill-height on the v-container but no luck.
I've also tried height="100vh" on the container but that also didn't work.
This is some sample code that's been simplified and it doesn't work either:
<template>
<v-container fluid fill-height>
<v-layout>
<v-row align="center" justify="center" class="mx-auto">
<v-col cols="8">
<v-card
outlined
class="d-flex"
>
<v-text-field
color="#F03C99"
label="Email"
placeholder="Email for Your Showroom"
outlined
class="ml-4"
></v-text-field>
</v-card>
</v-col>
</v-row>
</v-layout>
</v-container>
</template>
I'm starting to think that it might be that I'm using router-view this is what I have in my router
<template>
<v-app>
<router-view name="navigation" :key="$route.fullPath"></router-view>
<router-view class="fill-height" key="main"></router-view>
<router-view name="confirm"></router-view>
</v-app>
</template>
Here is my real code:
<template>
<v-container fluid fill-height>
<v-layout>
<v-row align="center" justify="center" class="mx-auto">
<v-col :cols="overallColumns">
<v-card
outlined
>
<v-row>
<v-col
:cols="accountForImage"
align="start"
>
<v-card-title>
<v-img src='small-bella-logo.png' max-height="41px" max-width="128px" contain></v-img>
</v-card-title>
<v-form>
<v-text-field
v-model="email"
color="#F03C99"
label="Email"
:rules="[rules.email]"
placeholder="Email for Your Showroom"
outlined
class="ml-4"
:class="marginRight"
:error-messages="errorMessage"
data-cy="login"
></v-text-field>
<v-text-field
v-model="password"
color="#F03C99"
label="Password"
placeholder="Enter your password"
outlined
class="ml-4"
:class="marginRight"
:append-icon="passwordVisible ? 'visibility' : 'visibility_off'"
:type="passwordVisible ? 'text' : 'password'"
#click:append="passwordVisible = !passwordVisible"
data-cy="password"
></v-text-field>
<v-row
class="mt-n5"
>
<v-col
:cols="stackColumns"
align="start">
<v-btn
color="#AF3482"
class="white--text ml-4"
data-cy="login-button"
#click="logInWithBella"
>LOGIN</v-btn>
</v-col>
<v-col
:cols="stackColumns"
:align="alignStackedColumnToEnd"
class="mt-2"
:class="marginLeftWhenStacked"
>
<h1
#click="forgotPassword"
class="caption font-weight-bold ml-4 pointer pink_text"
>FORGOT PASSWORD?</h1>
</v-col>
</v-row>
<v-row align="center" justify="center">
<v-col cols="12" align="center" justify="center">
<v-divider class="ml-4"></v-divider>
</v-col>
</v-row>
<v-row
justify="space-between"
>
<v-col
:cols="columnsFiveAndTwelve"
:align="alignStackedColumnToCenter"
justify="start">
<v-btn
class="ml-4 white--text"
color="#3B5998"
#click="logInWithFacebook()"
medium>
LOGIN WITH FACEBOOK
</v-btn>
</v-col>
<v-col
:cols="columnsFiveAndTwelve"
:align="alignStackedColumnToCenter"
justify="end">
<v-btn
class="white--text"
:class="marginLeftAndNegativeLeft"
color="#DB4437"
#click="logInWithGoogle()"
medium
>
LOGIN WITH GOOGLE
</v-btn>
</v-col>
</v-row>
<v-row align="center" justify="center">
<v-col cols="12" align="center" justify="center">
<v-divider class="ml-4"></v-divider>
</v-col>
</v-row>
<v-row align="start" justify="center">
<v-col cols="12" align="start" justify="center">
<h1 class=" ml-4 font title font-weight-regular">
No Account?
</h1>
<v-btn
class="ml-4 white--text mt-2"
:class="marginBottom"
color="#AF3482"
block
#click="sendAndCreateToken"
>
SIGN UP AND CREATE SHOWROOM
</v-btn>
</v-col>
</v-row>
</v-form>
</v-col>
<v-col
cols="6"
align="center"
class=""
v-if="removeImage"
>
<v-img src="login.png" class="mt-10" max-height="519px" max-width="187px" contain></v-img>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<p>{{ $vuetify.breakpoint.name }}</p>
</v-layout>
</v-container>
</template>
I am creating a form inside a Vue component using Vue.js & Vuetify but the list of schools I want to display in the autocomplete box are missing. I have included them as an array in the data function in the component but they are not showing up and the following error is thrown in the console.
[Vuetify] Unable to locate target [data-app]
<template>
<div class="app">
<v-card width="500">
<v-card-title class="pb-0">
<h1>Sign Up</h1>
</v-card-title>
<v-card-text>
<v-form>
<v-text-field
required
label="Email"
type="email"
prepend-icon="mdi-email"
/>
<v-text-field
required
:type="showPassword ? 'text' : 'password'"
label="Password"
prepend-icon="mdi-lock"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
#click:append="showPassword = !showPassword"
/>
<v-text-field
required
label="First Name"
prepend-icon="mdi-account-circle"
/>
<v-text-field
required
label="Last Name"
prepend-icon="mdi-account-circle"
/>
<v-text-field
required
label="Preferred Username"
prepend-icon="mdi-account-circle"
placeholder="This name will be seen by others and identify you on the site"
/>
<v-autocomplete
label="Which school do you attend?"
:items="schools"
></v-autocomplete>
</v-form>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-btn color="info">Sign Up</v-btn>
</v-card-actions>
</v-card>
</div>
</template>
<script>
export default {
name: "signup",
data: function() {
return {
showPassword: false,
schools: [
"Ipswich High School",
"Northgate High School",
"Kesgrave",
"Ipswich Academy"
]
};
}
};
</script>
For Vuetify to work, you need to wrap all of your content into a <v-app> component. The error tells you that you're missing this component.
<template>
<div class="app">
<v-app>
<v-card width="500">
<v-card-title class="pb-0">
<h1>Sign Up</h1>
</v-card-title>
<v-card-text>
<v-form>
<v-text-field
required
label="Email"
type="email"
prepend-icon="mdi-email"
/>
<v-text-field
required
:type="showPassword ? 'text' : 'password'"
label="Password"
prepend-icon="mdi-lock"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
#click:append="showPassword = !showPassword"
/>
<v-text-field
required
label="First Name"
prepend-icon="mdi-account-circle"
/>
<v-text-field
required
label="Last Name"
prepend-icon="mdi-account-circle"
/>
<v-text-field
required
label="Preferred Username"
prepend-icon="mdi-account-circle"
placeholder="This name will be seen by others and identify you on the site"
/>
<v-autocomplete
label="Which school do you attend?"
:items="schools"
></v-autocomplete>
</v-form>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-btn color="info">Sign Up</v-btn>
</v-card-actions>
</v-card>
</v-app>
</div>
</template>
The functionality of the component will not work properly unless the form is contained within a <v-app></v-app> wrapper
I would like to center the login, password and login blocks.
I want to center the different blocks but I do not know how to do it at this level.
I tried with v-flex and v-layout but it does not pass.
In the code I tried to center the first and second block with v-layout and v-flex but without satisfactory result.
<template>
<div>
<v-app-bar
color="teal accent-3"
dark
>
<v-spacer></v-spacer>
<v-flex xs="12"><p class="text-justify">Application de traitement des opérations</p></v-flex>
<v-menu
left
bottom
>
<v-list>
<v-list-item
v-for="n in 5"
:key="n"
#click="() => {}"
>
<v-list-item-title>Option {{ n }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
<div>
<v-card
class="mx-auto"
height="100"
max-width="200"
outlined
color="orange lighten-2"
></v-card>
<v-card
class="mt-n12 mx-auto"
elevation="12"
height="400"
max-width="600"
>
<V-layout>
<v-flex xs="12">
<div class="text-xs-center">
<v-col cols="12" sm="6" md="3">
<v-text-field
label="Solo"
placeholder="Login"
solo
></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="3">
<v-text-field
label="Solo"
placeholder="Mot de passe"
solo
></v-text-field>
</v-col>
</div>
<el-button type="primary" #click="dialogVisible = true" >Connexion</el-button>
<el-dialog
title="Verification de Connexion"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>Connexion reussi</span>
<span slot="footer" class="dialog-footer">
<el-button #click="dialogVisible = false">Annuler la connexion</el-button>
<el-button type="primary" #click="dialogVisible = false">Continuer</el-button>
</span>
</el-dialog>
</v-flex >
</V-layout>
</v-card>
</div>
</div>
</template>
There's a lot of ways to do this. You could use flex with display row, but it sounded like you tried that? If so you can also try setting these to display: block, and setting margin: auto.