Draw Circle Around Avatar Vuetify
Getting Started with Vuetify two.0
With the release of Vuetify two.0, at present is the perfect time to showtime learning how to use this popular component framework. Nosotros're thrilled to announce that we've started publishing our Beautify with Vuetify course over at Vue Mastery.com. This course will guide you lot on how to use Vuetify to create cute looking Vue.js apps.
In today's globe of beautifully designed software, having a site that only works functionally without any blueprint is no longer adequate. Most users these days expect a certain level smoothen when they visit a site. So when you are starting a new website, in improver to making sure everything works properly, how practice you make sure that it has:
- An attractive visual design
- The best user experience possible
The reply is Design Systems, which are a set of guidelines established to provide consistent design and user feel.
Some of the popular ones you may have heard of include:
- Bootstrap
- Bulma
- Material Pattern
Material Design is a design organisation popularized past Google which encapsulates their design principles and guidelines.While getting started with Cloth Blueprint may seem as simply as downloading a CSS file and including it inside your application, this method is frequently unable to fully take advantage of component blueprint patterns that allow your application to sustainably scale.
Presenting Vuetify!
Luckily for us, John Leider created Vuetify, which is a Vue component library that is built according to the Fabric Design specifications so you can rapidly build well designed applications. And while choosing a component library can exist a hard conclusion, Vuetify is a smashing choice because:
- It is easy and intuitive to utilise
- Has 1 of the most vibrant and active communities in the Vue ecosystem
- With regularly scheduled patches, yous can feel confident knowing your awarding will be supported and updated as fixes and new features are pushed
- And you won't accept to worry whether the components are attainable or supported beyond the various browsers. Vuetify has you covered.
With that said, let'southward build something with Vuetify!
For this lesson, we are going to prove yous how powerful Vuetify is past building a common feature that nearly applications have: a login module.
A login module typically consists of:
- Text heading
- Username input field
- Password input field
- Login button
- Register push
Sounds unproblematic enough, then let's swoop into some code!
Installing Vuetify in Your App
To get started, nosotros will scaffold a new Vue app with Vue CLI 3 called vuetify-dashboard with the default preset.
Next, we will cd into our project directory so we can add Vuetify to our app. With Vue CLI's plugin system, adding Vuetify to our project is piece of cake. All you have to do is run:
vue add vuetify Then you select the Default preset which is great for well-nigh setups.
Once the installation is complete, you volition meet that Vuetify has added and updated some files to make sure your app is properly configured. To brand sure everything is running properly, allow's first upwardly our local dev server. When we visit http://localhost:8080, you lot will see that Vuetify has replaced the standard average dwelling page with its own.
Exploring the Project Directory
Once you lot open up the project in VS Code, one of the things you'll find in the src/App.vue is that there a lot of components prefixed with v-. Like to how Vue uses the prefix to indicate Vue-specific directives, this is how Vuetify indicates that these components are part of its library.
This might seem like a lot to accept in at first, but let'south unbox 1 of these components. If we accept a look at what <v-spacer> outputs to, y'all'll meet that it is a elementary wrapper of a div that has the material design CSS for spacer fastened to it.
This is one of the simplest examples and information technology tin get far more complicated than this (i.e., colors, size, themes, etc.), but know that these are no different than whatever other Vue component you would build yourself. The simply difference is that they account for Material Design styles (i.e., colors, sizes and other configurations) and are intelligently designed to exist composable and reusable.
Now let's articulate out the boilerplate so we can get-go with a fresh page.
/src/App.vue <template>
<v-app> </v-app>
</template> <script>
export default {
proper noun: 'App',
data () {
return {
//
}
}
}
</script>
Edifice the Login Module
Start we will start by adding a v-card component to our page which will serve equally our container for the login module and dropping in a h1 to make sure everything is rendering correctly.
/src/App.vue <template>
<v-app>
<5-bill of fare>
<h1>Login</h1>
</v-card>
</v-app>
</template> <script>
export default {
proper name: 'App',
data () {
return {
//
}
}
}
</script>
Now we will add a sub-component called 5-carte-championship which provides standard spacing and positioning for the card header.
/src/App.vue <template>
<v-app>
<v-bill of fare>
<v-carte du jour-title>
<h1>Login</h1>
</five-carte du jour-title>
</v-card>
</5-app>
</template>
Next nosotros will add the five-carte du jour-text sub-component which acts as the wrapper for the body content in the v-carte du jour. And since we demand to add some input fields, we'll start by calculation a v-form wrapper. Since nosotros need text inputs, we volition add together a v-text-field component. We will then configure the labels by adding a prop of characterization with the value of "Username."
/src/App.vue <template>
<five-app>
<v-card>
<v-carte-championship>
<h1>Login</h1>
</five-card-title>
<v-card-text>
<5-course>
<v-text-field label="Username" />
</v-form>
</five-menu-text>
</v-menu>
</v-app>
</template>
When you click in the input field, the text input follows Material Design specs past changing positions of the label when focused and unfocused if no value is present.
Next, we will add together a v-text-field for the countersign input field. As we can run into here, the v-text-field defaults to text so we will need to define the blazon as countersign.
/src/App.vue <template>
<v-app>
<v-card>
<v-carte-title>
<h1>Login</h1>
</v-card-title>
<v-card-text>
<v-form>
<v-text-field label="Username" />
<v-text-field
type="Password"
label="Password"
/>
</v-form>
</v-card-text>
</v-carte du jour>
</five-app>
</template>
And now, the input is at present hidden. We still need to add our buttons. Luckily for us, five-card has another sub-component called v-card-deportment which serves equally the container for our buttons. And so nosotros add together our buttons, we use the v-btn component for Register and Login.
/src/App.vue <template>
<v-app>
<v-card>
<v-carte du jour-title>
<h1>Login</h1>
</v-carte-title>
<v-card-text>
<v-form>
<v-text-field label="Username" />
<v-text-field
type="Countersign"
label="Password"
/>
</v-class>
</five-carte du jour-text>
<5-carte-actions>
<v-btn>Register</5-btn>
<five-btn>Login</v-btn>
</v-card-deportment>
</v-card>
</five-app>
</template>
Now that we take the main parts for our login module, we can now style to arrive look even meliorate!
Styling Our Login Module
Permit's outset by adding an icons to our text inputs. This tin can easily be done with the prop prepend-icon. As you can encounter here, this automatically adds a properly spaced icon before the text input. In addition, another dandy thing about Vuetify is that it comes with a standard icon library that is already configured and prepare for use. For a list of all the available icons, check out the docs.
So for the username, we volition prepend it with the icon account_circle. And for the countersign input field, allow's add prepend it with a lock icon
/src/App.vue <template>
<5-app>
<v-card>
<v-carte du jour-title>
<h1>Login</h1>
</v-card-title>
<v-card-text>
<v-form>
<v-text-field
label="Username"
prepend-icon="mdi-account-circle"
/>
<five-text-field
type="Countersign"
label="Password"
prepend-icon="mdi-lock"
/>
</v-class>
</5-card-text>
<5-card-actions>
<5-btn>Register</v-btn>
<five-btn>Login</v-btn>
</5-card-deportment>
</5-carte>
</five-app>
</template>
We'll also need to add an icon at the end of the countersign input to inform users on whether the password is visible or not. Every bit you might guess, Vuetify makes that easy for us with the append-icon prop that nosotros will supply with the visibility_off value.
/src/App.vue <template>
<v-app>
<v-card>
<v-card-title>
<h1>Login</h1>
</five-card-championship>
<v-bill of fare-text>
<v-grade>
<v-text-field
characterization="Username"
prepend-icon="mdi-account-circle"
/>
<v-text-field
type="Password"
label="Password"
prepend-icon="mdi-lock"
append-icon="mdi-eye-off"
/>
</v-grade>
</v-bill of fare-text>
<v-carte-deportment>
<v-btn>Register</five-btn>
<v-btn>Login</v-btn>
</v-card-actions>
</5-card>
</v-app>
</template>
Adjacent, these buttons could apply some color, so let'southward use the "success" colors for Annals and "info" colors for Login.
/src/App.vue <template>
<v-app>
<v-card>
<v-card-title>
<h1>Login</h1>
</v-card-title>
<v-card-text>
<v-form>
<5-text-field
characterization="Username"
prepend-icon="mdi-business relationship-circle"
/>
<v-text-field
type="Countersign"
label="Password"
prepend-icon="mdi-lock"
append-icon="mdi-eye-off"
/>
</v-form>
</five-bill of fare-text>
<v-carte du jour-actions>
<5-btn color="success">Annals</v-btn>
<v-btn color="info">Login</5-btn>
</v-carte-deportment>
</v-card>
</v-app>
</template>
Finally, permit's clean up the layout of the menu. The login module is a niggling broad, then permit's requite our card a width of 400px, add spacing to the top and centering information technology Vuetify CSS utility classes mt-5 (i.e., margin pinnacle 5 units) and mx-a (i.due east., horizontal margin auto). The spacing betwixt login and the username input is too a little big. Luckily Vuetify provides us with utility classes like lead-0 which removes the bottom padding
/src/App.vue <template>
<v-app>
<v-menu width="400px" course="mt-5 mx-a">
<v-card-championship class="pb-0>
<h1>Login</h1>
</v-menu-championship>
<v-card-text>
<v-form>
<v-text-field
label="Username"
prepend-icon="mdi-account-circle"
/>
<v-text-field
blazon="Password"
label="Password"
prepend-icon="mdi-lock"
append-icon="mdi-eye-off"
/>
</five-form>
</five-carte-text>
<5-carte du jour-actions>
<v-btn color="success">Register</v-btn>
<v-btn color="info">Login</v-btn>
</v-menu-actions>
</v-card>
</v-app>
</template>
Next, permit'south add a five-divider to add visually separate the "card-actions" from the "card-text"
/src/App.vue <template>
<v-app>
<v-card>
<five-card-title>
<h1>Login</h1>
</v-card-title>
<five-card-text>
<v-course>
<5-text-field
label="Username"
prepend-icon="mdi-account-circle"
/>
<v-text-field
type="Countersign"
label="Password"
prepend-icon="lock"
suspend-icon="mdi-eye-off"
/>
</5-grade>
</five-carte-text>
<5-divider></5-divider>
<v-card-actions>
<v-btn colour="success">Register</five-btn>
<v-btn color="info">Login</five-btn>
</5-card-actions>
</v-menu>
</v-app>
</template>
And finally, to add some infinite between the buttons, we add 5-spacer and then we're adept to get!
/src/App.vue <template>
<5-app>
<five-card>
<v-card-title>
<h1>Login</h1>
</v-carte-championship>
<five-card-text>
<v-form>
<v-text-field
characterization="Username"
prepend-icon="mdi-account-circle"
/>
<v-text-field
type="Password"
label="Countersign"
prepend-icon="mdi-lock"
append-icon="mdi-eye-off"
/>
</v-course>
</v-card-text>
<v-divider></v-divider>
<5-card-deportment>
<v-btn color="success">Register</v-btn>
<v-spacer></v-spacer>
<v-btn color="info">Login</v-btn>
</v-carte-actions>
</v-carte>
</v-app>
</template>
Withal, as you might find, at the moment users cannot toggle the password visibility. Then allow'south build that functionality side by side!
Toggle Password Visibility
To start, nosotros are going to add together a data holding of showPassword that will have a default boolean value of false.
/src/App.vue <script>
export default {
proper noun: 'App',
data () {
return {
showPassword: false
}
}
}
</script>
To toggle visibility, nosotros volition utilize the v-bind directive to determine whether the blazon of the field will be text or password.
/src/App.vue <template>
<v-app>
<five-bill of fare width="400" class="mx-machine mt-five">
<5-carte du jour-championship class="pb-0">
<h1>Login</h1>
</v-card-title>
<v-card-text>
<v-form>
<five-text-field
label="Username"
prepend-icon="mdi-account-circumvolve"
/>
<v-text-field
:type="showPassword ? 'text' : 'password'"
label="Password"
prepend-icon="mdi-lock"
append-icon="mdi-eye-off"
/>
</five-form>
</five-card-text>
<5-divider></v-divider>
<v-card-actions>
<v-btn color="success">Register</v-btn>
<v-btn color="info">Login</5-btn>
</5-card-actions>
</v-carte du jour>
</v-app>
</template>
Since we want to allow users to toggle password visibility by clicking on the visibility icon, we will demand to add a click event to the icon. Lucky for u.s., Vuetify already thought of this by allowing united states to target our appended-icon by passing the target append as an argument to the click handler. With this, we tin now write the JavaScript nosotros need to toggle the value of showPassword.
/src/App.vue <template>
<v-app>
<five-card width="400" class="mx-motorcar mt-5">
<v-carte du jour-title class="lead-0">
<h1>Login</h1>
</5-card-title>
<v-menu-text>
<five-form>
<v-text-field
label="Username"
prepend-icon="mdi-account-circle"
/>
<v-text-field
:type="showPassword ? 'text' : 'password'"
label="Password"
prepend-icon="mdi-lock"
suspend-icon="mdi-eye-off"
@click:suspend="showPassword = !showPassword"
/>
</v-grade>
</v-card-text>
<v-divider></v-divider>
<v-menu-deportment>
<v-btn color="success">Register</5-btn>
<v-btn color="info">Login</v-btn>
</5-card-actions>
</v-carte du jour>
</v-app>
</template>
Now when we click on our visibility icon, y'all can see that it toggles the password visibility! However, this is still not quite correct because the password is visible while the visibility_off icon is still showing. To ready this, we use the v-bind directive again to write a ternary statement that will show a visibility icon when showPassword is true and visibility_off when showPassword is false.
/src/App.vue <template>
<5-app>
<v-menu width="400" class="mx-auto mt-5">
<five-menu-title grade="pb-0">
<h1>Login</h1>
</v-card-title>
<v-card-text>
<5-form>
<v-text-field
label="Username"
prepend-icon="mdi-account-circle"
/>
<5-text-field
:blazon="showPassword ? 'text' : 'password'"
label="Password"
prepend-icon="mdi-lock"
:suspend-icon="showPassword ? 'mdi-eye' : 'mdi-heart-off'"
@click:append="showPassword = !showPassword"
/>
</v-form>
</v-card-text>
<five-divider></five-divider>
<v-card-actions>
<v-btn color="success">Register</5-btn>
<v-btn color="info">Login</v-btn>
</v-card-actions>
</five-card>
</5-app>
</template>
Everything works and looks great now!
Conclusion
So far y'all've seen a preview of how helpful Vuetify tin can be for creating beautiful spider web applications. To continue learning everything you need to know to start confidently using Vuetify in your own projects, bring together us over at Vue Mastery for the total course.
Source: https://medium.com/vue-mastery/getting-started-with-vuetify-2-0-522ad3a55154
0 Response to "Draw Circle Around Avatar Vuetify"
Post a Comment