All language subtitles for [English (auto-generated)] Quasar Live Coding Sesh - Getting Started With Quasar Vite CLI [DownSub.com]

okay i'm going to give this a second

just to check that everything is working

maybe start up my terminal

and get my list of things ready to go i

like to just wait until youtube gives me

feedback and says

um that it is actually receiving my

stream which can usually take a couple

of seconds

and there we go it looks like

everything's running okay let me know if

it's not and um we can dive right in

so basically i wanted to do a video

series that helps you get up and running

with the latest in the quasar world and

since um i don't really have the

resources and time right now to create a

dedicated series to this i thought i'd

try and cover basically as much as i

could in a live stream

and then later on we can turn it into

something more robust because right now

my focus is covering all of quasar's

components so um which by the way if you

want to check that out then definitely

head on over to github

and you want to look at quasar car

take off this is basically a really nice

environment for learning um and you can

watch this video as well which gives you

more of an idea of what it is but if you

want to learn quasars components

basically you want to check out this

repo

all right but anyway that's not what

this video is about

so

first of all when i talk about what i'm

not going to be covering i'm not going

to be covering back-ends there are so

many different back-ends

later on i'm going to be talking about

some of the different ones which is what

i'm going to do here

and i'm also not going to be talking

about architecture because architecture

it just goes way beyond the scope of

what i want to cover today

so basically we're going to build out

like a bit of a i guess like a bit of an

admin panel i don't really know how this

is going to pan out we're just going to

do some coding but the main goal of this

uh video stream is to basically give you

a good idea of how to get up and running

with quasar today with a lot of the more

modern technologies all right so

without further ado

let's get started let me just zoom in a

little bit here

and now instead of saying quasar create

and then the name of the app so for

example my dash app

um you'll notice and by the way this is

if you have the latest quasar cli so if

you don't have the latest version of the

quasar cli make sure you pull that in

you'll notice that this doesn't work

anymore it actually gives you a message

telling you what to do now so now we can

just say yarn create quasar and that

actually means that you don't even need

the quasar cli any at all to the best of

my knowledge so we're going to go ahead

and run that yarn create quasa yarn

create

quasar and it's going to ask us a bunch

of questions and i'm going to show you

the questions that you're likely to

going to want to answer to now quasar ui

kit if you want to create your own app

extension so if you're a more advanced

user and you want to create an app

extension um that basically creates

reusable functionality in quasar that's

what that's about um

and that's for us specifically for uis

if you want to create your own quasar

component uh ie here app extension is

for other stuff like tapping into veet

or webpack and being able to do fancy

stuff like that tapping into boot files

so basically installing view plugins all

of that kind of thing you can extend

quasar with an app extension and then

this first option here is likely the one

you want to choose where you're actually

going to create a quasar app so i'll

select that and let's call this um

quasar

admin

panel i don't know i don't even know

that's what it'll pan out to be to be

honest now quasar version 2 using view 3

that's most likely what you want to

choose if there's a very small chance

that you want to choose this option and

use v2 so i only do that if you

absolutely need to we definitely want to

use quasar version 2 with view 3 under

the hood you can choose typescript if

you like um so i hit just so i can hit a

wider audience i'm going to choose

javascript though typescript is working

really nicely with quasar these days

now you've got the choice between

webpack and veet veet is currently in

beta

in my experience with it it's

surprisingly stable though so i'm going

to choose veet and chances are you're

watching this in the future vt is going

to be stable and you almost certainly

want to use vita unless there are some

specific webpack plugins that you want

to use so let's go to veet

um package name quasar admin panel is

what i'm going to choose

um project product name i'm just going

to leave that as the default description

this is all just like package.json stuff

author i'll leave that as the default

and we'll use sas with scss of course

you've got um the other option of using

sas um

the indented syntax or no sassador so if

you don't want to use sas you just want

to use plain css you can go ahead and do

that but i'm going to use sas with scss

and now i can choose some of the options

here eslint you definitely want to use a

lint up there's a very small change that

you don't so make sure that you've got

eslint selected

state management you can use pina and

vuex i probably should cover it at some

point but i don't think i'll have time

in this video if you want to learn how

to use pina or vuex and there are other

videos out there for that there really

is no difference between using pina in

another project and using it in quasar

um so if you want you can choose pina

then quasar is basically just going to

do some scaffolding to get that up and

running for you um same with ux um i use

vue x a lot only because i use a plugin

called ux orm which gives me an orm on

top of ux however you're probably best

off leaning more towards pina

for managing your data and if you don't

know what any of these two are that's

totally fine you don't actually need to

the other thing we have it axios that's

just for making back-end requests um we

probably won't need that and even if i

do use axial so i usually just install

that on my own manually um and then for

internationalization you've got view

i18n so there we go we're just going to

choose eslint in this example

and you've got the choice between pretty

r standard and airbnb now these are

eslint presets prettier means that

you're going to use prettier which does

a bit of extra formatting on top um i

don't like using prettier i find that it

gets in the way um and i don't like a

lot of the formatting that it does

however a lot of people swear by it and

love it if you like pretty other then go

ahead and use it i'm just going to use

standard which is plenty for what i like

to use in terms of a linter

if you don't know what linting is it's

okay you'll find out later on in this

video now let's go ahead and set

everything up we're going to use yarn

now to go ahead and install those

dependencies

and when they're done while that's

installing i'll just run through what

we're going to cover next oh so what do

all the getting started options mean i

did want to cover that

so if we go to quasar.dev

and we go to the getting started section

you'll notice that there's a lot of

quasar flavors is what they're calling

it now if this overwhelms you just

choose the quasar cli option okay it's

honestly um in most ways it's better

than any other options these other

options are only available really so

that other people have a way into the

quasar world if they don't have the

luxury of using quasar cli so for

example if you want to gradually add

quasar into a project you're going to

use umd standalone now that basically

means that you can add it to the top of

your project like it's showing here so

you're just adding in link and script

tags and then you can go ahead and just

basically start using quasar in your app

so if you don't have a build set up and

you want to start using quasar that's

why you would use umd standalone there's

no other reason really you would use

that it's more like to make quasar more

progressive so if somebody wants to

gradually add quasi into their project

they can or if someone's stuck in a

world where they can't use a build

process then you've got umd standalone

then you've got the veep plug-in now

this has caused a little bit of

confusion you've got the quasar cli

plug-in for veet and then you've got the

veep plug-in so

quasar cli

basically means that you're going to be

able to export to all the different

platforms and quasar can do a whole

bunch of work for you in terms of like

building your app and um

you know all sorts of cool stuff like

that

whereas with the vip and they've got

like a little table on the page that

shows you uh i don't know where it is

it's probably somewhere else here we go

that that shows you the differences

between the more but basically

um the v plug-in means if you already

have a veep project up and running or if

for some reason you need to use it as a

veep plug-in

then you can basically add quasar to an

existing veep project okay so if you

have a veep project you can now inject

quasar into that project that's what the

veep plug-in is

now for quasar cli

it's got a veet option okay you've got

the choice between webpack and vt

and that is slightly different like i

said before that means that quasar as a

cli tool can give you a whole lot of

extra features on top of quasar and

basically help you get started a lot

faster it is kind of hard to explain the

differences between these um without

going further into it i recommend that

you just use the quasar cli um

with vt it is better at the moment but

i'd start with that and then go into um

yeah stable and then um you know it'll

be it'll be stable

uh soon enough

uh so what else have we got then we've

got the vue cli plug-in so i know that

there's there's a lot of options here

basically the vue cli plug-in

um

view first had view cli

and then view uh evan created veet

okay so

view cli is um basically a webpack tool

that makes it

easy to work with view and like add um

plugins into view

um

using webpack under the hood so you can

almost think of it as like view class

webpack veed is um yeah well feet so

this is just another way of doing it if

you already have a view cli project and

you need to use um quasar then that's

why we have a vcli option available as

well so i know this was a little bit

long-winded basically at the end of the

day try and go for the quasar cli if you

can if you must use either the plugin or

vcli plug-in if you really have no

choice and you don't have a build

process then go to umd standalone okay

so

this should all be um done by now

hang on let me just get organized here

and it looks like it is so now we're

going to cd into our application

and we're going to open that in code

so give that a second to run

and i'll zoom in a little bit here

somebody said to me the other day it's

not zoomed in enough i don't want to

zoom in too far because i actually think

it makes a worse experience at least in

my

experience as a learner so i think this

should be enough but let me know if

that's not zoomed in enough for you

um

now the next thing i've got on the list

is changing the layout so a lot of the

thing that a lot of people want to do

actually let's just start by going

quasar dev so it's going to start our

dev server now when we run quasar dev

and we'll just jump out of full screen

here

all right so that's um our dev server up

and running and we're ready to start

developing

and

oh i was about to talk about yeah so a

lot of people want to know how to change

the layout here by default you get this

little um

button that then opens up that left menu

and you might want to have like another

button here or like a footer down here

and in order to do that quasar has a

really cool tool so we go to tools here

and then you jump into the layout

builder

then basically you can change the layout

using the options here so we can say

like i want a header yes i want a footer

let's get rid of the footer option so

that removes that footer at the bottom

there

i want a left side drawer let's keep

that in and let's get rid of the right

side draw

navigation tabs here if you want to have

them maybe we'll actually keep those in

and what else have we got

configuring layout parts so that's

basically the details of how all of this

sort of interacts i'll give you an

example if we choose basically you can

just play around with these options to

get them how you like them so you know

if you choose this option here then it

means that the left drawer takes up a

little bit of extra space

another thing you can do is choose

the capital letter l there versus the

lowercase i can't remember what these

all do i did a whole video on them but

honestly i forget what they all do but

this is a really powerful way to build

out a layout and you can check out my

layout video if you want more

information on that um but i think i'm

waffling a little bit here so let's

click on export layout now

and basically we can just copy this file

jump back into quasar and if we go to

source

layouts we can grab that default layout

that we have

and just replace it with this one

so there we go i've gone ahead and saved

that and now we've got that new layout

up and ready to go now obviously these

tabs don't do anything yet which is why

i'm getting a blank page there but um

let's check we don't have any console

problems and looks like we don't and so

yeah you get the idea that's how you can

basically build out the layout that you

want just jump onto this page play

around with it and get it to look

exactly how you want it to look okay so

let's close out of that now move on to

the next thing which is routing all

right so maybe we can make it so that

page one page two page three for example

is going to show a different page on

here that's probably a good thing to

tackle next

all right so the first thing to do is

probably to

set up the routing for those pages so

we'll jump into router and we'll jump

into routes.js

and basically we want to say we want to

create a page for page one

so how about we come in here

and we create another option here i

might just close out that menu

and i like to organize this a little bit

differently i like to have it spaced out

a little bit more i think it's easy to

look at

there we go and

let's basically just copy paste that

down and say if you go to the path

of

one

then i want you to take me to pages

slash

and we'll call this

one page all right we'll build that

component in a second

and we'll do the same for the other ones

two and three

so then we've got two page and we've got

three page and we'll change that to two

and we'll change that to three

all right so basically what we're saying

here if you go to the path of slash

right which basically means nothing

slash then we're going to be using the

main layout all right that's the layout

we're going to use this main layout

then

if you go to um slash nothing all right

which is this page here we're going to

inject this page the index page

into that layout so this part that

you're seeing in here that's the index

page so this is the layout the thing

that we pasted in before that's kind of

the skeleton all of this around the

outside and now this index page here is

the part in the center

all right so now if we go to one we're

basically saying i want you to take this

one page here and inject it into the

center all right now that shouldn't work

because i haven't actually created those

pages yet

so let's go ahead and create those pages

and you can do that if i open up another

terminal here by saying

quasar

i believe it's new page and we'll call

this one page

and then we'll do another one for two

page

two page

and i'll do another one for three page

three page

all right now one more thing that i want

to point out here is

i said that this is the layout the

skeleton of the outside and then

um since this is sitting within its

children that means it gets injected

into that component how does it get

injected into there

well if we jump into main layout so i'm

going to control click that to jump into

there and scroll up see how it says

router view here

that's the part that gets injected into

the center so if i comment this out

notice that nothing shows up

router view is basically saying hey this

is where i want you to spit out if i

come back here that's where i want you

to spit out this component

all right so now let's jump into

one page

actually we'll go back to the main

layout here and now we need to link this

up to go to

those locations so

here we go this is this here cue route

tab is basically that page one

and then same with the other one here is

page two and i believe we made it if i

go control p

back to my routes yeah we just made it

the words one two and three ctrl p back

again

so let's change that to one

and two

and three

let's see if that works

all right so we're getting some sort of

an arrow just do a quick refresh here

cannot read properties of undefined

reading file all right so it looks like

i've done something wrong

i might just close the beat server out

and start it up again just in case it's

a problem

with the dev server

okay yeah there we go looks like i just

needed to restart the server

and looks like that's working but now we

need to actually put some content in

there so how about we go to page

one page in fact i'll show you that in

the file menu so to get there i went to

source pages and when we created that

page before it showed up here in one

page

and now let's just spit something out

here one page save it and there we go

now it shows up in there so that's how

we're basically easily able to hook up

these links here to an actual page

and by doing it in this way by using

this cue route tab component so if i go

back to the layout

this cue route tab component that means

that we can essentially refresh the page

and it takes us back to one page if i go

to page two and refresh the page

it takes us back to two page so this is

going to link up the current page that

is selected in that route tab

with the route itself

okay so hopefully that makes sense

anyway let's move on to the next thing

so

that's routing covered let's uh do an

introduction to the composition api with

script set up right let me show you what

i actually mean by that

so if we go to one page now notice that

we've got this export default section

here

um what we can do here is say

setup for those of you that aren't

familiar with script setup i'm going to

get sorry um the composition api i'll

give you a really really quick rundown

so

let's set

this to

a variable so we'll say pre tag there

and we'll say my

var

and then we're going to say const

my vi is equal to ref

and the reason we're saying ref is

that's views way of basically saying i

want this to be a reactive variable and

then we'll say um some

message here

and then what we have to do

is return my message

so what's happening here is i'm saying

hey i want to create a myvar variable

which is a reactive reference to this

string here some message okay so this is

how you create a reactive variable

using the composition api okay so if

you're using the options api in the past

this is just like using um the data

properties so it's just like doing this

saying data

return

and then saying

my var

is equal to some message right

these are essentially the same thing

okay but there's a few benefits here

which are going to start revealing

themselves and what we have to do with

the composition api is we have to do

this return statement here and this is

basically saying hey i want this

variable to be available on the template

okay so anything returned here is now

available

on the template up there

all right and that's why it now shows up

here as some message

and now what we can do is we can say q

dash input so this is quasi's input

component

v dash model so we're going to model

my var here and now if i type something

in there

it changes um that message up there so

it's reactive okay so that's what we

mean by ref if we didn't make it a ref

then it would not be reactive

so let's do that

and we need to comment that out

and now if i change this it's no longer

reactive all right so that's why we use

the word ref there that's that's what's

making it reactive now another thing we

have is computed properties

and i'm going to use like a really silly

contrived example just to get this out

of the way and show you quickly

computed

example

is equal to

and i will do a proper composition api

video at some point now we can say myvar

dot value so that's the next thing when

you're using the composition api inside

of setup you can't just refer to my var

you have to refer to it as my var

dot value if you want to look at that

value or change it all right in the

template we don't have to we can just

say my var and behind the scenes it says

myvar.value

however inside of the template we have

to say myvar.value

is equal to

something else um but sorry this is a

computer property so now we can say

return my var.value plus

more text

and now let's take that computed example

and we need to pull computed

out of view so i've just imported that

and we'll import that directly from view

now we've exposed it on the template

that's what we've done here

and now let's go ahead and just spit it

out in a pre-tag there

all right so some text and then more

text so basically it's just added on

this more text part here and that's also

going to be reactive

all right so that's how you do computer

props using the composition api

um the other thing is if you want if you

want to use methods you can just do them

directly in here so we can say for

example

um

change

to

um

change to luke to change it to my name

and let's make that a function

so function change to luke and now what

we can do is say myvar.value

is equal to luke

and now we'll expose that here notice

how linter is yelling at us it's helping

us it's saying hey you're not even using

this function that's a problem make sure

you actually use the functions that you

defined there

okay so now we've got this function

change luke and we'll just have a button

here

q dash button

and then we'll say at click

and we're going to call that change to

luke function and quasar's buttons can

have a label so we can say here change

to luke

and i'm going to click on that

and it changes the text to luke alright

so that's how you do methods with the

composition api it's it's actually when

you get used to the composition api

you'll love it because it's very much

just javascript it takes you out of this

fancy world of the options api where

some stuff is happening that feels a

little bit um uh i guess

like unflexible whereas you get this

extra flexibility with the composition

api where you can start like moving

things into different files really

easily

but anyway i digress

so i think that's about it there are a

couple of things other things like

dealing with props but i'm going to say

that for later on that is the crux of

using the composition api you just have

refs

um where you define um your variables

like this you have computed properties

very similar to using the options api

but now i want to show you how to make

this

this syntax even nicer so what we can do

is instead of using

setup here

we can come up here and say script and

then the word

setup and that means that we can

actually get rid of all of this code

here so this export default setup

we can get rid of that

i'll save it

we can get rid of return because when

you use script setup

basically it does some stuff behind the

scenes to notice what you have defined

here so for example this function

changed to luke

without returning it now it's going to

notice that we have this function and

automatically make it available on the

template for us

okay so it does that for us behind the

scenes and now our code looks a whole

lot nicer and

it still works alright so this is what

we mean by script setup script setup

basically allows us to get rid of that

export default

so instead of going export default

setup

and then doing everything inside of

there

um and instead of then returning

everything inside of here we can get rid

of all of that code

and just do it flat inside of script

it's really really nice way to code um

using using quasar using view three so

this is a view three

feature this is an a quasar thing this

is a view three thing any v3 app with a

compiler is going to allow you to do

this

uh all right so

that's about it for

um

for that that's an introduction to the

composition api now the next thing i

have on my list is building a basic

login page so how about we make this

page one

a login page so i'm going to jump into

my layouts

main layout

and then we're going to change this from

1 to

log in

and then let's call this

login

there we go so now we've got login

showing up there

but that link will no longer work

because we now need to change the route

that it's going to

so we go to router

routes

and we say hey router if you go to slash

and then

login i want you to take me to one page

but let's actually change that to

login page

and then i'm going to jump into pages

one page or right click and i say rename

and call that login page now

and i might need to

shut my server down a lot of this stuff

is probably going to be fixed soon with

the vcli plugin so

it's just a couple of tiny things like

that that might not

um

work straight out until some of those

bugs are ironed out

so now we can go to the login page and

there we go it shows up

so let's get rid of all of this and

start from scratch this is going to be

good practice

and inside of this cue page

i'm going to have a cue dash card

and i'll just show you what that looks

like oh we've got nothing in it so you

need to have some stuff in it a cute

card is just a very very basic component

that gives you a shadow on the bottom

and gives you kind of like that cardi

sort of feel and now i can say inside of

here q card dash section so a section

inside of the card which is going to add

a little bit of padding in there so you

can say here for example content and

notice we get that extra padding now and

what i want to do is give this a maximum

wix so width so i'll say style is equal

to max dash width

and i reckon about 600 pixels is

probably good for

a login form let's see what that looks

like that's probably too much to be

honest how about we go like 450.

there we go so it's put a bit of a width

on that i want this to be in the center

of the page so what we can actually do

is say the class is equal to and used we

can now use some of quasars utility

classes which it gives us out of the box

and we can say hey i want this to be

flex and then flex dash center this is a

really really nice way to just center

something on the page

now notice that it's lost the width

there if you wanted to still take up

that full width so that maximum width

that we've got we can add a class on

this card called full width

all right so these these patterns that

i'm showing you right now flex flex

center

full width and then having a max width

on a card this is really common i do

this kind of thing all the time this is

a really good pattern to know all right

so let's turn this into a login card how

about we say

log in there you might want that to be

centered so we've got some utility

classes for that class is equal to text

dash center and now that login text is

centered i'm also going to say style is

equal to font dash size

1.3 em

yeah for basic stuff like this i

actually use the style tag quite a bit i

know a lot of people don't like the

style tag

um

do what you like if you'd rather just do

this in pure css that's totally fine for

simple things like this that are

one-liners i'm totally fine with using a

style tag i actually find it easier now

one thing that's annoying me right now

is i don't like this layout i want all

of this to be on new lines

and this is the quote-unquote view way

of doing things you usually have when

there's more than one property on you'll

usually have those on new lines so what

we can do is make our eslint a little

bit stricter so our linter is going to

be a bit stricter and automatically put

those onto new lines for us so let's go

to eslintrc.js

and what i'm going to do is comment out

view three essential so that gives us

basic linting

and we're going to change that to view

three recommended and if you don't know

what linting is what it basically does

is checks for errors in your code

and catches them for you alright so see

these little yellow underlines that's

saying hey this should be on a new line

that's why it's giving us that little

squiggly but one of the cool things

about eslint if i save this file now

it can automatically fix those problems

for us it's a really nice way to develop

so now what i can do is basically

cross this out cross that out and put

all of this on one line

so you can just write your code in one

line like that you don't have to worry

about formatting or spacing and then

when you save it it automatically

formats it for you now you do need to go

into the quasar docks so we go to the

quasar docks here

getting started guide

uh you'll notice there's a section on vs

code configuration if you haven't done

it yet you definitely definitely want to

run through this vs code configuration

option

menu in the docs all right so make sure

you go ahead and do that

if this you know automatically if saving

the file doesn't automatically um lint

it for you it's probably because you

need to do follow this guide in here

okay so anyway let's move on to the next

thing

uh login page we're going to need uh an

input let's add another section here q

card dash section

and inside of there we'll have a q input

and then let's set a label of that

import equal to

name

all right or it's probably more likely

to be something like

email

so there we go we've got an email input

ready to go i don't like the styling for

that but we'll fix it in a moment and

then another one we've got here is we'll

probably have password so that's a

really classic login form where you've

got an email and password and then

you'll usually have a button at the

bottom and what i like to do is i like

to put the button at the bottom outside

of the card section because remember the

card section adds padding and add a cue

button here and say the label is equal

to

log in something like that and then i'll

give that a class equal to full dash

width

notice that it takes up the full width

now and then i'll give the a color equal

to

primary

all right i think that looks really nice

for the button how it sort of takes up

the full width at the bottom now another

thing i'll point out that if you want to

change what this primary color is so

basically the styling of your

application then you can jump into the

css directory in here and then go to

um quasar variables

dot scss and you can change basically

the default styling of your app this is

a really good way to get up and running

just for um basic styling of your

application giving it a primary and

secondary color and usually my apps i

like to keep styling very very simple

unless you have a designer i highly

recommend just having a primary

secondary and accented color i wouldn't

actually change anything else i wouldn't

go too fancy with styling unless you

really know what you're doing in terms

of creating a styled ui

all right so you might like come in here

for example and change that to

i don't know let's go to a nice bluey

color like that or aqua whatever you

call that

and let's set the accent i'm probably

breaking some material design rules here

at the moment but

that's okay

and then a secondary color

and let's save that and notice it in a

second that's going to change sort of

the whole look and feel of our site

which is really nice

all right so there we go so the color of

that equal to primary i don't like this

little sort of underline type form i

like it sometimes but i don't think it

looks good in a login form

so another one we can use is filled here

so let's set field for both of those

inputs whoops

filled

there we go notice they're not spaced

out very nicely so quasar gives us this

really nice class chord

q so in other words quasar put a margin

on the bottom and i want you to make it

a medium-sized margin and there we go we

get a medium-sized margin on the bottom

my phone just went off so i'm quickly

going to check what that is

it's a message from my mother she tried

to call me

all right we'll leave that for now now

that i've done this um it looks like it

is actually a little bit too wide still

so let's change that from 450 to 400

there we go i'd probably even go a

little bit um

less in terms of the width maybe 370.

and i think that looks good if i put the

password in you can actually see

everything there

so let's change this to

type is equal to

password and that means that as we type

in the password nobody will be able to

see it if they're looking over

somebody's shoulder now just to be give

you a little bit more info here we can

change it from field to outlined that's

another option that we have so it's kind

of a nice effect as well and another one

that we have is borderless this is

really good inside of tables so if you

want to basically take out

most of the styling you can change that

to borderless all right so let's bring

that back to field i think field is

really nice in this example

and the next thing we might want to do

is model that so you imagine you want to

actually model some data here and then

when you press log in it's going to

actually use the email and password to

hit your back end and log the user in so

let's have a look at what that might

look like we'll come in here and we'll

say

const

form is equal to a ref and we're going

to press tab to import ref there

and let's make the form have an email

it'll be an empty string by default and

a password which will also be an empty

string by default now we can come up

here

and for the email we can say v model is

equal to

form.email and then we'll do the exact

same thing for the password which is

equal to form dot password so now i can

type my email in

and my password but it does look like

that's not working

so let's just try restarting the server

again yeah it looks like something went

wrong at some point there

and close that out

and now it's working so there you go and

then of course what you probably do is

you'd say function

uh login you might make this an async

function

and then

when the user tries to log in you will

then use the form dot value because

remember you have to say form dot value

well when you're inside of um

inside of a script setup or when you're

using the composition api and basically

you'd say like um axios dot post and

then you go to your login endpoint and

then you'd post the data which might be

just the form dot value all right you

get the idea this is um something that

goes beyond the scope of this video so

for now we'll simply say

uh

console.log form dot value

and i'll grab log in there and we'll say

at click for the button so when you

click on that button

i want you to call that login function

let's open up the console here

and then

put in some information there

and we can see that it is working now

you've got the email and you've got the

password

cool

all right so

that is a pretty good start what else

can we do

uh so i think that's the login page done

and i've shown you some basic components

so you've seen the q button component

now

by the way quasar is not pulling in all

of these components by default by

default it actually pulls in no

components and it's automatically going

to notice that you're using q button and

then pull it in to make sure that you

maintain a very small bundle size so i

think that does confuse some people they

think they're going to end up with a

massive file size because they're using

quasar not true at all it only pulls in

the com

the components that are actually used

there

okay so that's the login page now i

quickly want to cover choosing a

um

choosing a back end

and i've talked about a couple of the

options here

uh

and look it's i'm just one i'm just

going to breeze over these and just give

you a quick idea of what some of these

back ends do and then make some

recommendations basically based on um

you know what you might be trying to

accomplish with a back end now for back

ends where you need a lot of control um

running things on your own servers

and you need something that's like a lot

more robust then i'd recommend something

like laravel

uh laravel's something that i've used in

the past

um i love this framework and it's a php

back end so if you're familiar with php

uh then that might be a good place to um

a good one to check out

uh the one that i'm actually currently

using at work at the moment is strappy

and it allows you to get it up and

running a lot faster than laravel does

because it gives you a nice interface

for adding fields and but it still keeps

you in control of the back end so it's

still a back-end that you run on your

own servers okay and strap is actually

built on top of something called koa and

you might know about express.js koa is

basically the predecessor pre-assessor

what's the word um anyway there was

express.js and then um

and then koa so that's definitely

something worth checking out and it's

kind of like a lower level

uh back end that mostly does things like

handling middleware

and um giving you

some basic functionality for building

out a back end it's less opinionated

than something like strappy

the other

frameworks in this category if you want

to jump into the node world

would be

i should throw these over here

uh something like uh ness js so this has

a very modular system i haven't done a

lot of experience i've got a lot of

experience with an sjs but definitely um

check that out if you're considering a

more robust node type back end um then

you've got something like adonis js so

if you have experience with laravel but

you need to use a node based backend you

might want to check out adonisjs it's

basically a laravel clone in javascript

really interesting project so nest js

and adonisjs you might want to check

both of those out if you want a robust

back end

building experience now as for back ends

that

you don't actually build out yourself so

ones that are kind of self-managed you

just say what the data is and then the

back end is kind of built out for you

and you don't need to manage servers or

anything like that

we've got firebase and superbase so

firebase a lot of you have probably

heard of this is a google product and it

makes it really easy to basically get a

back end up and running

fast

and it makes it really easy to kind of

interact with nested data with a back

end super bass is something that was

built um

to kind of uh what would you call it i

guess it's a competitor of firebase but

it's using postgres under the hood it's

a very interesting project and i would

actually steer people more towards super

bass if you're already using the google

suite you might want to check out

firebase um but i think super bass is a

much more interesting um project it

feels more modern to me it's using

postgres

on the back end it actually deals to the

best of my knowledge it actually deals

directly with postgres which gives you

some pretty insane speeds

and it does some really interesting

things with like live data and it makes

it really easy to set up your data

um manually sorry

set up your data and then have like

relationships and that kind of stuff uh

set up for you so you can easily then

retrieve that data from the front end so

if you want to get up and running fast

these two guys

if you want to get up and running

um

fast but you need more control over the

back end then you might want to check

out these two or laravel especially if

you're like experiencing the php world

or even strappy which is kind of a more

um takes to look takes on a lot of the

responsibility for working for

with models for you if you want to go a

little bit more low level then check out

something like koa or maybe even express

or if you want to go super low level

then you might want to check out node um

itself like um but chances are you

already know if you are watching this

video and you already know what

uh and you want to use something like no

then you already know what you're doing

anyway all right i'm talking about this

too much so that's a quick overview of

choosing a backing back end loaded topic

uh what have we got here about backhand

i'm a big fan of lara around thought

about switching to a donor so being able

to share some parts between front and

back yeah i think the adonis is a very

very interesting project um and i would

be tempted to use it if i would you know

go into the back end world again

um for node.js

but i have to use strappy because that's

what the work is using but to be honest

i'm really liking strapping more and

more um especially since i can jump into

the lower level stuff with color okay

moving on

so i want to show you some other cool

components oh no hang on let's just jump

to this part here i've kind of like

screwed up the order now

i wanted to show you basically building

a

users table what that might look like

because this is a kind of a common

problem but first let's just build up a

little bit of a menu on the left side

here so that we can actually click on

for example a user's option something

that you'd often see in a cms

so we'll jump into our main layout

all right now notice we've got a lot of

these yellow squigglies that's because

we updated our linter if i just save the

file now my linter is automatically

going to lay that out in a really nice

way

for me by the way notice we're not using

script setup here

so i'm going to say setup i can get rid

of all of that i can get rid of all of

that

um i can get rid of the

return statement here

and

whoops i got rid of one too many

brackets and i'm going to turn this into

a const toggle draw function

is equal to

that function

there we go so notice that script setup

really does make things a whole lot

cleaner uh all right so

let's go ahead and create a menu and i

want to try and do this the right way so

let's go full screen here because we're

going to go a little bit more code heavy

now

um

all right so

where's our menu

we'll come down here so this is our draw

the draw is that left menu that you see

within our application

and so what i'm going to have here is a

q

list but what you might want to do is

actually create a new component for this

so i'm going to say control shift p

reveal this is a really quick way to

basically reveal in your left panel the

current component that you're on

and

i'm going to create a new file here and

i'm just going to call it

main

layout menu dot view

and i've got a really nice snippet here

for a template that i like to have by

default

let's go back into the main layout

here it is here and we're going to use

this um

main layout

what did i call it yeah main layout menu

actually i'm going to change that name

to

main layout

uh

menu list because i always like the last

word in my components to match up with

the quasar component and we're going to

be using the q list component so that's

why instead of saying main layout menu i

say main layout menu list because it

makes it clear to me and other

developers that this is going to be a

list component

all right so that's why i've done that

and now let's just make this a q

list

and i'm just going to put some random

text in there just to see if this is

working and instead of a cue list there

we're going to make that our main

layout menu

list all right so

that should have been auto imported

let's double click that and scroll up i

like to just test if it was and there we

go that was auto imported for me if

that's not auto importing you might want

to check out volar which is a extension

for visual studio code that just makes

it really nice um dealing with view code

all right there we go so we've got our

main layout menu list

let's see if that's working and there we

go we can see it showing up at the top

there looks like nothing uh

to begin with

so let's come back here we'll jump into

this component and start building out

our main layout menu list by the way

this is something you want to do a lot

you don't want to put everything into

one big component you want to try and

break your components apart into smaller

chunks like we've done here

so let's call this a q dash item so

inside of a cue list you can have a

queue item and instead of a queue item

you can have a q item dash

section

all right and there's a reason that this

is deeply nested right there's a reason

it has to go list item item section it

gives us some really nice flexibility

because it means we can have a section

on the left of the item that's for

example one and then if we add another

section in here that says two

and i'll save that

um jump out of full screen let's have a

look at that

it just makes it space out really nicely

and then you can do some really nice

stuff by saying hey i want this section

to be on the side and then it throws

that section onto the side

and just it's a really nice way to help

you lay out your items

which is why we've got this cue item

section rather than throwing it directly

inside of queue item so hopefully that

made sense i just wanted to give you a

little bit of context as to why we have

to do that deep nesting of the

components here

all right so

we can also come up here and make the

item clickable

and that basically means when i hover

over this we're going to get that little

link

showing up or we can even say two to say

hey

this is going to take you to

the users page all right so if i hover

that it's still going to be clickable

because 2

basically automatically adds that sort

of clickability styling to it and now if

i click on here

it takes us to the user's route which of

course doesn't exist yet all right so

that's it that's pretty much how we can

very easily make a menu and then you

might have up here another item so q

item and then a q item dash label

and then you can say here this is our

menu right just add a little label there

in fact i want to think i want to wrap

that in the cue item section

so

let's cut that and say q item dash

section

throw that in there

and there we go that's just made the

styling a little bit nicer

all right so let's change this from one

to

users

um and i just know that people are going

to want to know how to style this a

little bit more so let me just quickly

show you here you could say class

is equal to

i don't know background primary

and then you could say text dash white

to make the text white and that's the

way that you might like want to style

that differently you know there's a

there's a whole bunch of different

things you can do in terms of styling

here

but i might just bring that back to our

original example

there we go

all right so

we've now got a user's menu takes us to

a page that doesn't exist so we now now

need to make that page first of all

let's come in here and say

i know this is hard to view but um

i'll speak it as i write it oh this

isn't letting me grab the

menu bar there my vs code is messing up

anyway i'm writing here quasar

new

page

and let's call it

users page

all right so now that's created a new

blank page for us

so we'll jump into users page and we'll

come in here and say script setup

we'll get rid of export default

and i actually like my script setup to

be at the top

so let's do that

and then we'll say users page here

and

what else do i want to do now i need to

do the routing for that so we'll go

router

routes

and then we'll create another page and

i'm just going to copy that one

and we'll call this users because

remember the link took us to users and

that's going to take us to pages slash

users

page

save that

and there we go now we've got our users

page so now i can click on these

different menu items they all work or i

can go to the menu and click on users

and that takes us to the users page so

hopefully you're seeing there's a lot of

different ways that we can basically

manage

menus when we're using quasar and notice

by the way that quasar automatically

makes that highlighted for us when it's

selected so if i select log in notice

that the color of it is black but when i

click on that

notice the color of it is now that kind

of

bluey aqua color that we chose

all right so

the users page is going to be a table

i'm just going to do an example table

for you to show you what that looks like

control by the way to do that i said

control p

and then i search for users page that's

just a quicker way to

to sort of jump around your editor and

now i can come in here

and say q

table

and let's go ahead and start building

out a table now so we're going to need

some dummy data for this table so let's

say const data is equal to

and since this is not going to be

reactive i'm not using a backend or

anything i don't need to say ref here i

can just give it an array straight up

so now

let's give it some objects and i'll say

name is equal to luke

dibol that's my name email

is equal to luke at

let's use my quasar cast one

quasarcast.com

and

you can imagine this would probably have

an id as well so let's say the id is

equal to

one and i'll do a couple of others one

for my dog one for my other dog and one

for my other dog

we have two two hours sorry three two

hours at the moment

all right so this first one i'll just

sort of zoom through these we've got

panda

we've got

lily

and then we've got

min min

might do min dash min yeah that looks

better and now i can say me and mean

and we can do lily and we can do panda

so there we go we've got all of the data

for the users page now eslinter is being

helpful and saying hey you have a data

object but you're not actually using it

so go ahead and do something with that

data data array

so now we can come down here and say hey

table i want you to have some rows and

those rows are going to be equal to that

data that i have so let's refresh the

page to see if that works and there we

go by default it actually automatically

figures out a lot of stuff for us but we

want to have a little bit more control

over these rows so let's go ahead and

see how we can do that

we can say const columns

is equal to and we'll make that an array

of objects

and let's say field so the field for one

of these columns is going to be equal to

name

and the name of that is going to be

equal to

name

and i think that's all we need to begin

with

i don't have the docs up so i'm doing

all this from memory let's see if that

works out for me

save it

all right so there we go notice now that

we just get the columns for the name and

now we can do some other stuff like a

line and we can align that to the left

there we go

and i think we can give it a title i

can't remember how to do the title to be

honest so let's come over here

um this is useful though uh if you want

to find out more about how quasar works

under the hood this is really really

valuable to know so if you're kind of

like haven't been listening very closely

so far listen right now if you go to the

quasar docs and have a look at the api

explorer

that link isn't working i might need to

refresh the page here i think the docs

just updated yeah here we go

the api explorer gives you access to all

of quasar's api cards which is insanely

insanely helpful so i can come in here

and say cue table

and there we go i've got all the

information i need to know about the q

table component and you'll notice if we

click on this docs menu here

and we go to the q table component every

component gets this little card at the

top that gives you full access to the

api if you can understand how to use

this card it is insanely insanely

helpful so definitely go ahead and check

that out

all right so coming back here

we're using a prop and it was the column

prop so i can even come in here and say

columns because that's the name of the

prop that i'm trying to use

so here it is here columns

name we can give it a label that's the

one that i was looking for so let's come

back to vs code and now i can say the

label of this comma column

is equal to and i'll just throw that

over there

name

and there we go we've got the name of

that column so this is now giving us a

little bit of extra control over that

column we might want to display the id

so if we want to do that we can just say

that the field is equal to id the name

is equal to id i think technically you

don't actually need the name that's for

other things like when you want to start

using slots that's how you identify it

inside of a slot that's why we have that

name field

um all right now let's just change this

to id

there we go

and we have total flexibility now so you

might want to say instead of email you

can say like primary email is the label

here the field of that is equal to

email

and maybe we want to align that to the

right gosh

i can't get my sentences out right now

can i

and this one you might want to align

center usually with numbers you want to

align things centered

actually i think it looks better with

left in this scenario

there we go so you got the primary email

um and honestly i'd probably align all

of these to the left

that's looking good now just to show you

a little bit more of what you might want

to do here to get some more control

a field can actually be a function so

instead of returning a string field

which basically says hey i want you to

grab the field out of the object data we

can change this to a function

all right so you can pull out the row in

that function and then say row dot

email

and notice that gives us the same thing

but now you can have more control over

it all right so if you wanted to just

append something to that

in fact maybe you do something like this

email this is a terrible example i don't

know why you'd do it because it's

redundant but the point i'm trying to

make is that you have total control over

the display of this value

and you can actually come in here and

change the uh what sits inside of that

cell as well and i don't want to go too

much into this otherwise this video will

be too long but i can for example if i

undo all of that

i can come in here and use a slot

and i can't remember the name of the

slot so i'm going to come over here to

the api explorer

and we're going to look for the slot

section

and it's called sell something so let's

scroll down here

you got body cell which allows you to

access every single individual cell

or if i scroll down

what else have we got body cell and then

the name of that cell remember how i

said the name property is important for

identifying the name when you're using

slots so let's come in here and also add

in

name for all of these

now i probably should tell you what i'm

actually doing here what i'm actually

doing is i'm showing you how to access

each individual cell so you can put

components in the cell itself

all right this is really cool i think

you're going to love it

so now i can come in here

and then say template

ah there's something crawling on me

we've got ants in this house

and then we want to use the slot that is

called

body

cell

and then the name of this cell which is

let's do that email one to begin with

email

all right so just to show you what this

looks like i can now create a div called

email cell

and notice that it's taken over this

cell here

so what we can do now is we can say q td

right because quasar's got its own table

data so that we get all the table data

styling and there you go

next you can pull in you can pull the

props out of there

and then proxy those props down like

this

and that basically means that um all the

styling and all the extra details

related to a cell is going to be proxy

to the cell itself so if you do other

things like hiding the cell so let's

just say

um i think it's called is it called

hidden yeah

and let's say hidden is equal to um

email here

is that gonna work

ah

hang on

i wanna show you this because i think

it's important

um

no visible that's what the word is yeah

here we go

you can say visible columns here so

visible dash

columns and i want to say hey only show

me the name column

all right now if i get rid of this part

here that is proxying the props

ah let's just get rid of this as well

ah that's still working all right to be

honest um i thought that wouldn't work

let's just shut down the server

so that's something that i need to do

some research on

that's right i like having new things to

learn

yeah i thought that that would actually

not make it invisible because you need

to proxy the props anyway yeah you need

to know this anyway because sometimes

those props need to be proxied otherwise

um

something uh some functionality is going

to be lost uh inside of that cell all

right moving on now what we can do is

actually spit out the row here so i'm

going to throw that in a pre-tag and

just say

props dot row

all right so notice now we have the

access to the entire row

and now let's get rid of that

and just change it to props dot row

dot

uh email

all right so basically we've now

replicated the functionality of the

table cell but now we have total control

over it so check it out we can use the q

chip component give it a color equal to

primary and then we can just pluck this

out and throw it directly inside of that

chip

and now we've got it inside of a chip

and i believe we've got here text color

we can set that equal to white

um

or maybe

just class is equal to text dash what

is that it do i need to refresh the page

what's going on here yup there we go

so now you can just take total control

over what all these different cells look

like and a pattern that people want to

know all the time so i'll quickly show

you it in this video is if you want to

update one of these cells you can just

put an input directly in there so i'm

going to copy that

and i'm going to paste it directly in

here

i'll just hide that out display this a

little bit nicer

and now i can come in here and say body

cell email

and change this to an input ah not email

sorry this is body cell name

so instead of a chip let's say

q dash input

ah

q

input

and then v dash model is equal to props

dot row dot

um

name

all right so now we actually have an

input for that individual cell

and then we could say

borderless all right that's going to get

rid of all of the borders border styling

all right so we don't have that

underline anymore i might have to

refresh the page yeah sometimes hmr

doesn't work i'm currently with v i'm

sure that's going to be fixed soon all

you do is refresh the page and

everything works fine so it's not a big

deal and the other thing is notice

that's taking up a little bit more space

now so you can say dense

so that it takes up a little bit less

space there we go kind of like um makes

it a bit smaller

and now this is an editable field

now the reason that's not working is

because

uh this is not a reactive ref

so i believe all i have to do

i could be wrong here i'm pretty sure i

just need to turn that into a ref

save it

refresh the page let's see that works

now yeah there we go now you can

actually change that value but as you

can imagine you'd probably be dealing

with a back end and you'd say hey when

this field changes then go ahead and hit

the back end

give me a spinner as well i'll quickly

show you how to do that

you'd have to say for example

loading

loading on here is equal to true and

then that would obviously be modeling

something to let us know whether or not

it's hitting the back end

so notice we now get that spinner

on to let us know that it's loading and

then you might want to add some more

styling on that so you'd say like color

is equal to

primary

i mean i could sit here all day showing

you the all the really cool stuff that

we can do with this input

but we'll leave it at that for now um

and by the way i wanted to just wanted

to point out a really interesting

pattern with quasar is that it always

makes things

really easy to do by default so if you

remember at the start of when we added

this table in all we had to do is

literally add the rows and it just

worked that is all we did however you

can extend things however you like it is

incredibly extendable

now another thing you might want to do

is have a form so you can imagine you

might have like a button at the top here

that shows a dialogue where you can then

add a new user so let me just quickly

show you

what adding that functionality might

look like first let's get rid of this

spinner because it's going to drive you

all insane

there we go let's get rid of that

so a common pattern would be

jumping into the top here

whoops in fact what i might do is get

rid of um

all of this template just to bring us

back to a simpler example

and there we go

so what we can do is we can say template

um

and we can say top and that's going to

allow us to access the top of the table

so there we are there so now i can say q

dash button and i'm going to make this

button round

and i'm going to make it

unelevated

and let's give it a color equal to

primary

all right so i can actually probably

quickly show you what that does without

rounds

it's square

without unelevated

it gives us this shadow in fact maybe

we'll keep that shadow that doesn't look

too bad and then the color sets at the

primary of course and then you can say

the icon is equal to i think it's add or

plus yeah there we go so now we've got

like this cool plus button which you can

imagine is going to be for adding a new

user

and then what we want to do is make it

so that when you click on this we get a

new dialog and that dialog is going to

have a form for creating a new user

so now we can come in and add a dialog

underneath this table q dialog and one

thing i like to do

is say that it's v dash model is equal

to show dialog

and then set this equal to

we say const show dialog is equal to a

ref that's equal to true by default and

i set it to true by default because it

makes it easier to edit so that whenever

i refresh the page i don't lose that

dialogue i'll show you what i mean so

when i save it we now have that dialog

and of course it looks like nothing by

default

right quasar purposely makes the

dialogue extremely extremely minimal and

then we can basically start doing stuff

like throwing in a card q card dash

section

and then at the top of the card we might

have a q

toolbar this is going to be a great

opportunity to show you some components

by the way

q

toolbar dash title

and let's set the title of this toolbar

equal to

[Music]

create user

all right so let's lay that out a little

bit nicer

so basically we've got a cool a toolbar

um component which adds this um sort of

space nicely spaced out um top of the

toolbar

and then we've got a cue toolbar title

which basically adds a little bit of

styling in here

and then we can say

q dash button

and i want to make this flat i want to

give it an icon equal to close

and i want to say at rv dash close dash

popup so this is a really cool directive

that we get by default with quasar

that's going to automatically close the

pop-up that this button is inside of

all right let's see what that looks like

there we go when i click on this it

closes the pop-up how cool is that

another thing we'll do is we'll make

this round and we'll set the size equal

to small i think that might be a bit

nicer

let's try that and see how it works

oops what have i done here

yeah there we go that's probably a

really nice um close button

now

for the card inside of here i'm going to

say the style is equal to max

width and let's say 400 uh

i don't know

450 pixels

save that and then we'll say that the

class is equal to

full

width

there we go this is a pattern i like to

use because it means that if it's um

let's let's just set this to something

like 600 and what i like to do is say

the max width is the optimal viewing

width all right so if it gets a really

big it's not going to make the width of

this card too big

but if we go smaller it is going to get

smaller because this is set to max width

all right so this is a great great

pattern to know about for dialogues set

it to full width for the card inside of

it and then set the max width to the

quote unquote optimal viewing width

that's how i like to think of it all

right so this is starting to shape up

nicely now we've got this cue card

section in here

and then this is where you'd have your

form and usually i'd extract these to

their own components but you know how to

do that now because we did that with the

list for the left menu over here so now

i can say q dash import

and let's just breeze through this the

label is equal to

name they're going to have a name and

they're going to have an email you

wouldn't really do a password i guess

when you're adding them in this scenario

and then underneath that card section

we'll say q dash button and then we'll

say the label is equal to create

save it

and there we go

i also like to make this um

filled

and let's put a class equal to q dash

margin bottom dash medium there

there we go

and

this button let's say the class is equal

to full dash width

and let's set the color equal to primary

there we go so now we've got like a

create user form and then you can

imagine when you click on that create

button that it does something so let's

say i click is equal to

create

user i'm going to scroll up to the top

now and create that function

function create user and then you do

whatever you need to do to create the

user and then you'd say that the show

dialog is now equal to false once again

we're using the composition api so

whenever you're dealing with a ref you

have to say show dialog dot value to

basically jump into the ref

um

to

change the value inside of it

so let's save that create and imagine

that it then created the user and then

close that dialog one last thing we need

to do

this create button doesn't actually do

anything so let's come down here to that

button there it is there the add button

and we can say

this is really simple at click is equal

to

create what do we call it

show dialog

is equal to show

dialog is equal to true all right so

notice that we can actually put some

functionality directly inside of the

template here so

we don't have to create the function

inside of here either something as

simple as

changing a value to true or false

all right so when we click on here it

now shows that dialogue

all right cool stuff now the last thing

i want to do is actually show you how to

model this form because currently that's

not modeling any data so it doesn't work

so let's quickly run over that

uh we'll come in here and we'll say

const

create user

form once again this would usually sit

inside of its own component and that's

going to be equal to ref

and let's say the email

and then the name

create user form i'll come down here

and then we'll say

wait where are we here we go

v dash model is equal to create

userform.name

and then create userform.email

so let's save it and now we've got that

data i'm being modeled so that we can

actually deal with it when we're ready

to go ahead and create that user

in which case you would then hit your

backend the user would be created and

then you would go ahead and close that

dialog so just to give you a little bit

more of a fuller example here let's

scroll back up to that

so this would probably be an async

function you'd probably say async

and then you'd have a function that

creates the user which would be a

promise so you could say await create

user

and then i don't know maybe you're using

laravel so create user with laravel

and then you would go ahead and say show

dialogue that value is equal to false

and usually you see patterns like this

where you pull out something like um the

error

and then

the response

or in this case actually you'd probably

just pull out the error and then you

could say something like if we get an

error there then you know you deal with

the error

um else

set show dialog to false right so just

to kind of give you a basic idea of how

you might handle the back end there but

you know of course i can't do the back

end in this video because i want it to

be a little bit more general

all right

so there we go uh

that's about it for that the next thing

we've got on the list oh by the way

let's set this equal to false by default

so now when i refresh the page

yeah so that sort of gives you an idea

of how you might start approaching

building an admin panel

um let me show you a sort of quick

example of how you might do the same

concept using an inventory this is kind

of going to drill some of the concepts

that we've done home so i'm going to

move a little bit faster now let's jump

into

main layout and we'll jump into our main

layout menu list

and then inside of here we've got users

let's add another item in there and as

if you end up having a lot of items here

you'd probably model data instead and

say for example v-4 is equal to item in

items in fact let's actually go ahead

and implement that

all right and then you'd say the key is

equal to something like

item.label

and then the place that it's going to

will be item.2 and then i have to add

the

colon here to make sure that actually

gets um

interpreted to make sure it gets run so

it's not seen as a string some beginners

might not know that if you don't have

this colon here that's going to be seen

as item.2 the string but then you add

the colon and that's the way of saying

hey view i want you to bind this to

item.2 so i want that to be um the value

of that to be passed through to two

okay so then we'll spit out here the

label

item dot label

save it of course that's not going to

work because we haven't created any of

our items yet

so now i can come up here and say const

items is equal to

an array

and the first one is going to have a

label equal to

users

and then 2 is going to be equal to slash

users

and i think that's it

const sorry

let's refresh the page here

and there we go so we basically got the

same thing but now we're modeling some

data and you know what i want to show

you how i would actually do this to make

this a little bit more realistic so ctrl

shift p reveal to find that in the left

menu i'd actually create a new folder

here called main

layout and then i go ahead and throw

that main layout component in there

and i go ahead and throw the menu list

in there

and then

i go ahead and create another file here

called

menu

items.js

and i'd actually take all of these menu

items

and i'd throw them into this separate

file here export default

um yeah i'd probably just do that

directly like that

because i'm constantly constantly

constantly trying to pull my components

apart as much as i can i don't think

i've ever

done too many abstractions in terms of

pulling my components apart you really

do want to keep them as in

like the smallest fragments as you can

and makes it far easier to maintain so

now here all i have to do is say menu

items so we'll pull that in

oh that didn't import import menu items

from dot slash

menu items and then i'll copy that and

come down here instead of item in items

we'll say item in menu items

all right so let's refresh the page see

if we get any errors there

looks like i have gotten some

oh i need to update my routes file

because i just changed the structure

here so go to routes.js

and

it's now layouts main layouts slash main

layout.view

some people will use an index.viewfile

that's another way to do it i actually

like to just use the word main

layout.view because it's easy to search

so i can now say control p main layout

and easily jump into it and i can't do

that as easily when it's index.view

that's why i like to name them very

specifically

that's only a source maps error so i'm

fine with that and there we go now in

order to add a new menu item i can jump

in here

and say hey

i now want to have a new menu item and

by the way this is easier for other

developers in the future when you do it

this way

and we'll call this inventory

and we'll say in

ventary

so come up here inventory now we've got

our inventory page which of course

doesn't exist yet control and we'll open

up this menu here quasar

new page

invent oh god i need to spell this right

in

inventory

page there we go

and now we go to routes.js

and we've got our users page and by the

way i'd probably start extracting um

routes into their own files now because

this is also starting to get a bit

bloated for me

but i won't do that right now

and we'll call this inventory

and we want to point that to inventory

page save it

and now we should have an inventory page

inventory page

once again like i like to name things

very specifically so

inventory i can just type in control p

inventory and easily jump over to that

file

um

i'm just going to replace this with my

own template

and then change that back to a q dash

page by the way cool thing to know about

q page this is a really handy thing to

know about q page um notice that

q page is actually taking up the entire

size of the frame here um so if i go if

i bring the scroll bar to the top

it's still only taking up this section

here and if i go right to the bottom

see how the minimum height of the page

is changing

this is actually insanely helpful

because if you need things to be

contained within this page so for

example if you want your own scroll bar

on the right side there rather than

scrolling down the page and then having

the menu disappear and then you know

menu on the left here disappear um since

this is um

manually sized like the page on its own

it means that you can do some really

interesting

layouts

um those of you that are a bit more

advanced know what i mean by that i

won't um expand on that anymore because

it's probably jumping into a

a too advanced zone

all right so what am i doing now i'm

doing an inventory page with some cards

so we've got this inventory page uh what

is a car going to have we're probably

going to want to have an image so let's

say

inventory here and of course you can

imagine this is coming from a back end

let's say the label of this card

is equal to

um i don't know pants

uh maybe we'll call them like spicy

pants

um

what else i guess you give it an id as

well because it's probably coming from a

back end

uh we'll give it a description

and they say look

great in any

era

and then i want to have an image for

this as well so i get to use quasar's

image component

image source by the way some people like

to use sword shorthand like img i hate

doing that there are some exceptions

like id for identification because

they're so obvious but i usually like to

just write out the whole word for some

reason that's a pet hate of mine but you

know everybody knows what img is i guess

that's a bad example but i try not to um

shorten words too much because it makes

it harder for other people to understand

my code

um especially when i'm doing loops i

never use things like i or e or x in a

loop unless it's some

a very like um technical type of loop

all right so moving on here i'm going to

say https dot slash slash

i need that to be a string

pick some dot photos this is a great way

to just get a random photo let's set the

width to maybe 600 by 200

that'll do for now and let's just get

that first inventory item spat out

all right so now we can say

g

card

q dash card

man my um

ide isn't playing nice for me today q

dash card

and then we'll have the image at the top

so we can say

v dash 4 is equal to card in

uh

inventory

and then we can say the key because you

always need to have a key when you're

going doing a v4

is equal to

card.id

all right there we go

and then inside of there we're going to

have the image

of the thing so for that we can do a q

image component and we can say the

source of that image is going to be

equal to

the image source so now i can say car

dot image source

by the way i named this very badly card

is a bad name

um i would say something like um

item because it's an it's an item in an

inventory

so let's refresh that what's going wrong

here and there we go it's loading up

that image and that seems to be working

nicely

so the next thing i want to do is add

some padding to this page

padding so that adds just a little bit

of padding that's kind of like quasar's

default padding

um and now let's go ahead and just add a

few more of these cards now before we do

that actually let's set a max width on

this so style is equal to max dash

width

and

i think a oh what's going on w-i-d-t-h

i think my t-key is messed up a little

bit we'll set that to maybe like 300

pixels

how's that let's see how that looks

yeah i think that's a pretty good width

for the card but i think it's probably

needs to be a little bit higher maybe

like 380.

yeah that's a bit better and let's can

we say width and height for that image

can we say like um

the width is known

let's say 600

and the height is equal to

380.

yeah

that means when it's loading it's going

to be a little bit more specific i think

that works

oh it just doesn't need to be

interpreted it doesn't really matter i

guess yeah let's leave it like that

what's going on here invalid prop type

check for

okay it exp expects a string there

um so maybe we'll change that to pixels

as well

oh gosh i've been going for a while now

so i do want to finish up soon

is it really that much

oh because we set this to 300 okay we'll

set that to 300 width and let's set the

height to maybe 180 and then we'll come

in here we might as well get one that's

300 by 180.

sorry this is finicky start yeah there

we go just means when it's loading it's

already the correct height

and

that's our first card now the next thing

you'll probably want to do oh by the way

you probably want some categories as

well

categories equal to

[Music]

um

pants

and

clothes

categories

all oh category's

there we go so the first thing i want to

do is add some chips here for the

categories so

i want to add underneath this image a q

car dash section

and man for some reason let me just

restart vola

because for some reason when i do

my components it's not automatically

there we go it's working now i had to

just restart vola

and then we'll say q dash

we'll add some chips in there so we'll

say

um

g dash chip

and we'll say v 4 is equal to chip in

chips and then the key is equal to

let's say chip dot id and we'll actually

add some more information to these chips

so how about we give

the category our

name and then we'll also give it a

color

so primary oh how about we say like um i

don't know green

and then we'll make this other one which

is called clothes

and make it blue

all right

make sure we've got the comma in there

and we can say feeders for

uh

category in

item

dot

categories

all right there we go so now we've got

the category id

and then we can say the color is equal

to the category dot color

cool we got those chips showing up now

um what do we call this we call this the

name of the chip

so now we can come in here and say

the label is equal to category.label

now

is it label once again back to the

trusty api explorer

q chip

open it up content we got icons

um we got label label

category oh that's right i called it

name

my bad and now we can say text dash

color i think and then say white there

so let's refresh the page there we go so

now we've got some chips showing what

category

they're in now this card section is

adding too much padding for my tasting

but my taste so let's say

class is equal to q dash

padding or we'll just make it a smaller

amount of padding there we go i think

that looks a bit nicer and then you want

the name of the thing i probably want

that before the chips

yeah i reckon you want it before the

chips so let's come up

um before them

and we'll give it its own div

and we'll say

item

label

save it spicy pants of course that needs

to be a little bit bigger we might even

turn this into a h

i don't know five maybe

spicy pants i think that's a good um

text size and now we can say class is

equal to

q dash margin y so margins on the y axis

is going to equal none so it gets rid of

that y axis margin

and i might just change that to margin

bottom none and then i can say q dash

margin top small

yeah that looks good q margin left uh or

maybe small as well

small or medium medium maybe

yeah i think small looks better

there we go and now one thing that i

like to do i get a bit obsessed over

this to say text color no sorry text

dash

gray dash nine and it just softens the

text a little bit which i think is a

little bit nicer to read and then we

want the description sitting underneath

it so we'll come down here and we'll say

div

and this is going to be the description

i like to give them all their own

separate divs it just makes me feel like

i've got a little bit more control

category dot oh sorry not category this

is going to be the item

item

dot whoops description

there we go that doesn't look quite

right does it it needs to have its own

padding class is equal to q dash padding

or medium

there we go that's the description of

the thing i don't know if i like padding

or medium maybe

padding

x

medium

yeah and then we could say q dash

padding

bottom small you can kind of like style

this however you like

yeah so really we want just

yeah i think that looks good i think i

want these though to be next to the

title

yeah let's try that i think that might

look a little bit nicer so let's throw

them in there

and

how does that look

yeah i think that looks a little bit

better and now maybe we can justify

using a cue card section here

now that it spaced it out a little bit

yeah okay this looks good to me and now

we'll add a little bit of more margining

on the left there margin left small will

become large and left medium

and i think this looks really nice okay

just because i'm being super pedantic

let's come in here and make that dense

no dance is too dense

change my mind

ah what about small size is equal to

small

instead of dense

yeah okay i think that looks pretty good

so there you go that's the idea of how

you might do a card for like an

inventory list

and if you want to make this clickable

you could say for example

class is equal to

i think it's cursor

pointer

or mouse pointer

ah i can't remember

let's come in here and say

pointer the docs have really good

searching functionality by the way

they do a really good job hitting all

different parts of the docs here we go

style and identity i think that's it

it's under like um

helper classes it's a helper class so

let's say helper

cursor pointer that's what it is

so what i can do is say hey

this card is clickable because you might

want to make it so that when you click

on that card something happens

and there we go now i just get like a

nice sort of i'm clicking button and it

might open up a dialogue where you can

then edit the card for that inventory

item and then of course you can imagine

that you would have a bunch of these and

the next thing you might be interested

in is

layout for that and i don't think

there's actually anything we need to do

for the layout

let's just paste a bunch of these down

and we'll have to change the ids for all

of them

one

two

three

four

let's try that

all right so that

layout doesn't look great does it so

let's have a look at how we might

improve the layout for this

uh first thing i'm thinking i want this

page to be a row

all right so next thing i'm thinking is

i want everything to be centered so we

can say justify center there

and now next i'm thinking i want to have

some gaps between

all of these items and i think i can

easily do that with um

well first let's wrap the card

inside of a div ctrl shift enter

there's a hotkey for that i can't

remember what it is sorry but it's a

really quick way to sort of wrap

everything

um

all right so now we can say

that this has got a class equal to q

this is a quick and easy way to do it

actually q dash padding or medium i

could just do that couldn't i

no sorry q dash margin or medium

and then i you want the margin to be on

the card this stuff often confuses me q

margin or

medium

and then that's a row maybe these have

to be set up as a cold class it's equal

to

what am i doing wrong here

this is a row

ah okay i reckon these divs are taking

up the entire space so let's take that

style tag out of there

because i don't think i actually need

this class in here

hmm i don't know what i'm doing wrong

so this should be a row it is a row

and

my voice is low by that do you mean you

can't hear me very well

you can use cue gutter instead of q

marginal

yes q gutter is nice um

both of those options are available in

fact q gutter is probably a better

option if you have a more thorough

understanding of quasar

the reason i don't use it all the time

is because

sometimes it runs into problems when

you're using like

your own margining and padding and you

have to do like some

some nesting and stuff like that however

i will admit that cue guide is a much

nicer way to do it um if you do handle

those kind of edge cases in fact i think

you're right we probably should use

qgata here

but first i want to figure out

why i can't get these rows working

i don't want to sit on this for too long

though

what am i missing here you know what

let's go to the quasar docks and just

look at the part around layout

see i still get this stuff wrong all the

time sorry not layout this is around

grid

yeah so you make a row and then you just

throw your divs in there

so maybe there's something weird that

i'm doing

i don't know if anybody can catch what

i've done wrong here then please let me

know i'm getting a little bit tired so i

don't think i can go on for much longer

um

what happens if i get rid of justify

center there

hmm

that margining is now messing with um

the width

i'm going to change this to a column

class is equal to col for column

yeah i think i'm going to have to take a

break now i mean my brain is just

shutting down

um

i don't get it it's a row

there's no way columns should work there

so what else could i

possibly be doing wrong what else is

sitting underneath here

ah

of course so i'm iterating over all the

cards inside of this div

oh gosh that's so silly of me

and there we go so

that is now working

and now it looks like it does make sense

to

[Music]

maybe not set a width and height on that

so it's not enforced

and now we want to set a min width on

these so

what did i say max width

um

so another thing i like to do is set a

min dash width

yeah all right i'm going to stop after

this let's set it to maybe um

300 pixels as well

and then maybe we could bump that up to

like

450 pixels

yeah all right that looks pretty good

and that's going to spawn respond really

nicely as well it's going to be very

responsive on just about any

screen size

yeah you actually honestly for something

like this i'd probably just set a width

so like width is equal to i don't know

450 pixels

ah alright so that didn't work

looks like you need to set both of these

all right that'll do me for now

so anyway we covered quite a bit of cool

stuff we've got a user's table now

we can go ahead and create a user

um you know this is all obviously just

um ui stuff inventory

we've got our login page and i just

wanted to give people an idea of how you

might get up and running

um with uh the you know modern quasar v

cli

and what else so another cool another

sort of set of things that i want to

cover is the splitter component i won't

do this right now proxying data using

usb model this is a really nice pattern

um for basically allowing you to wrap

components and then we're going to talk

about sort of advanced wrapping of

components to make it really easy for

you to extract data and then i wanted to

talk about some of the stuff i'm working

on right now but we'll save that for

another time thanks everyone for

watching and i'll see you in the next

stream bye for now