Using Material Design with Vue.js 2

[Music] hi my name is Sebastian from coding the smart Wacom and today in this video I'm going to show you how to integrate material design components with you view js2 application and we will do so by building simple sample application I'll show you in a minute and we will use a library called new - material and with that library we can easily integrate material design components in your ujf - application and make use of those components within your template so let's get started okay so let's first take a look at the sample application we are going to build in this tutorial and you will see it here so it's just a very basic application - just showing you how to integrate material design components in your view js2 application and as you can see here our user interface is very simple we are using various view various material design components here to build up on the user interface we have a card here which is containing all the elements here on - 2 buttons and the table here and by using those two buttons we can first click on fill table and you see here the table if so it was free on data items and we can use the other button create able to just remove the items from the table and yeah let's basically all will go to build because the main aim of this tutorial is to show how to use new material at the library to integrate material design in you UJS application so the first step we are going to to to complete is to first set up a new initial UJS - project okay so let's start initializing new you journals application is very easy by using the view CLI the command-line interface and the view command interface gives you access to a command which is named view and we can use that command to pass a few parameters here we say in it and then we say webpack because we want to use the view j2 project templates which is which is based on webpack and then specify the name of the project so let's call it view J as MD for material design okay now you can see here a few questions coming up here on the command line but I can just leave most of the answers to the default which is given here so project name project description as default author is default the view built option I choose runtime and compiler I do not want to use es volunteer in my project because we want to keep keep saying so simple I do not want to use a set up unit test with carmine maka so no and I do not want to have end-to-end testing integrated here so again no one so that's all now you can see it here a new folder has been created you JL - Andy and I can switch into the folder now and to complete the setup of the project I now need to execute npm install because executing this command makes sure that all the needed dependencies which are already listed in the package.json file here within the project folder are downloaded and installed into our project so let's execute npm install and it takes a second to download everything and installed here okay here we are you can see all the dependencies have been downloaded and installed successfully to our project and now just to make sure that everything is running we can start up the development server by entering NPM run death and let's starting up the development server and opening up our view j/s application in the browser automatically here on port 8080 and so here it is levelled you can see that it's the output of the default of UTS application and now we can start with first integrating the view material library which gives us access to the material design components and then use those components in one of our components and only in the associated templates so there is one more dependency and we need to install to our project that is a dependency which is not in the default set of dependencies and that is the new material library and the website of this project can be found here at view material github IO and you can see here on the year the overview page you have a button on getting started and if I click on the button here you will find instructions of how to install the view material library to you project and basically we need to do two things we need to install the view - material and the M package and then given seed here include the Roboto font and of the icon set from Google's content delivery network here by they are just copying those two linked elements to our firm index dot HTML file in the project okay so let's begin with installing the NPM package I'm switching back to the terminal window and I'm starting the web server here for a moment and then use the command NPM install new - material at the name of the library and I'm all the passing over the - - safe option for making sure that the view material dependency is also added to the list of dependencies available in the package dot adjacent file okay so let's install it it's downloaded and again installed into the node modules folder of the project okay here we are you can see installation has been completed successfully and the next step is to download the power project into the code editor and I'm using atom here in that case so I'm launching atom here in the project directory okay here this okay and then I need to open up index.html go back here to the website and just copy those two link elements here go back to Adam and enjoy both link elements inside of the add section here in index.html okay so the next thing needs to be inserted here in the file main body is another source folder and the file main dot yes as you can see here is containing the main entry point for the beauteous application so view the main framework graph is important here and a new instance is created and that's the entry point of the view application and now we need to add two more import statements here to make the material design components available in our application so first we need to say import view material from you - material at the name of the library counter we also need to import [Music] the corresponding stylesheet um that's called you - material slash dist slash you - material dot CSS okay we both import a statements available we need now say you dot use and pass over new material that is configuring the framework so that it knows that there is a plug-in available view material and that this plugin is loaded and by loading view material we make the material components were able to our application okay so let's start using some of the material components first we need to open fw that the place where the main UJS component of our application is implemented and you can see the file is already containing the default implementation of app component and we now need to start implementing the user interface for our sample application by first deleting the template content which is here inside is a dis tag with the ID of app assigned so let's remove it and we'll also remove here the component property the component configuration object because we do not want to use the hello component which is available here in the components folder we do not want to include the hello component we are just using the app component here so we have no dependency to the yellow component here so let's remove it okay okay so let's start here in the template the first element we want to use in our user interface is a material design cart and we can include those cars by using the MD - cart element here okay and the cart accomplice or from - two sections one is the MD card edit section clean up MD card header okay let's close it here and the second section we need to include here is of course the MD - card - content section okay so within the header of the card we are including first title let's give our application a title and we do so by using a div tag here and assigning on the MD - title class which also comes from the material design framework and we are using the title material design with huge enough to demo here and let's also include a sub a sub-headline let's use another big element here and we are assigning the class of MD subnet okay and let's give this up headline text here by coding this mount why not calm okay so for a moment and you can see with now also that the header section of the card of the content is just left empty okay before implementing the court content section heal itself switch over to the terminal again and start the development web server again so that we can already see what's there and you can see the application is loading again here in the browser and then now you can see here here is the cloud layout we already have headline here and we have a sub headline and now we can arrange on that window here to maybe have it side-by-side with my code editor and I just want to remove some of this styling which is included here so let's remove I want to remove everything only the margin top can can be left okay here this okay so let's continue in the MD - card - content section here the first thing now we would like to do here is to bring in two buttons and we do so by using the material design component MD - button and the button now needs classes and one class we are using as MD - lower - right and the second is MD - primary and mental cause we would like to respond to the click event of the button and to do so in view je s we are using the directive we - on column followed by the name of am event type we want to respond to and that is of course a click event and now we are assigning here a string which is containing the event handler method so let's name it Phil table because the very user clicks here on that button we want to fill the table of course we need to implement that method later on okay so let's name the button show table and to close the MD - button element here okay like so okay so then we need another button again we are assigning the class of MD - right and MD - primary and we're attaching an event handler for the click event which is called in that case let's name it clear table okay okay so let's save it and see how the output has changed now you can see it's not only containing a card with just headlines it's also containing those buttons here in the blue layout in the blue the blue color we have choosen by selecting the class MD - primary ok before continuing on the implementation of the template by adding the table maybe let's go to the Style section here and to make the card to layout a little bit more visible here on the Left border and the right border let's attach a margin left of let's say 30 pixel and let it touch a margin right again 30 pixel and see how the output changes okay let's save it okay let's remove the space okay here it is so next add all the table to our output and we do so here under the closing tag of MD - card - content and the table is added by using them the element MD - table on top and within that element we first need MD - table - header section like so and within the header section of the table we are including an MD - table - row for the headlines let's close it okay so in total our table consists of three rows so we need our three headlines and each headline is included by using the MD - table - header element okay like so let's copy it okay the first column should I should get assigned the headline first name the second is last name and the last one is email okay you can see here this and now of course we do not only need a table header we also need a table body and the table body is included by using MD - table body okay and within the body section we are again including MD table row and now of course we want to generate a new row for each data item which is available for output and we do that by using the B - for directive and let's say contact in context later on we will be defining contacts which will be an array and that array so by using the button field table it's emptied by using the create table button of course so let's first complete the implementation of the template before doing so and okay let's close this row here okay within that row we need to import three things for each each of the columns we need to output the corresponding value in contact and again we do it by using a new element which is called MD - table - cell okay we needed 3 times a 1 2 3 and now we are using the view clay as interpolation syntax with double curly braces now curly braces okay so first we need to output contact dot first name then we need to output contact last name and the last property whether the contact object is called email okay let's save it ok you can see the output has not changed of the reason of causes we have not defined a contacts or array already in our application so there is no data to output and therefore no table role is generated only the headlines and so it's empty at the moment okay so next let's add on the context array - on the data model of our component and we do that by going here to the exported component configuration object which at the moment of unequal lists of the name property which gets here assigned to where you want to spring value add and now we are going to add the data property which is a function and the function is returning an object so return object which is containing all the data properties we would like to use in our application and we would like to use in our template and at the moment we are in need of the context array so let's define it here so contacts and let's say it's empty by default so it has no items assigned save it here you can see here in the output nothing is changing and now we need to implement the two method methods fill table and clear table and we do that by adding another property here and that property is called new methods and methods is an object containing the implementation of both functions so fill table first place the function and we are implementing the fill table function by adding data to the context array so we would like to have three items inserted here by that function so let's start with this context and we are using the push function here and okay and push L getting passed in the object we would like to insert as an array item and of course we are needing an object here which contains three properties and the first property is first name okay let's assign my name here and the second property last name and the third property is of course email okay and I'm assigning an email address here okay so here we are now that's copy that line and insert it a second in the third time let's change the values here is the first name in that case let's say go we have last name list and I need to change the email address screen as well and in the third item here I choose a first name and a last name let's say token and email address as well Abel Parker okay so now we have three and items being inserted here by that postcards to our array and okay let's implement clear table as well okay it's again a function of course and in this case we want to empty the table and we do that by emptying the contacts array and this is done by calling the splice method and we splice all the elements out so from zero to all this contact length okay here we are okay then finally check the result here in the browser and now again you can see the output has not changed yet it is okay because initially the context array is empty and then we need to call the fill table method by clicking here on the button but do so you can see the table is filled here with three items that is a result we have been expected to see and now I can remove every single juice here in the table by hitting clear table you can see the table is is empty now everything was removed so let it's exactly the result we would like to have here in our sample application thank you very much for watching this was a bastion from coding the smart way comm if you do like my videos please don't forget to subscribe to my channel here in youtube and also is it my website at coding the smart way don't come thank you very much again see you the next time bye [Music]

Channel: CodingTheSmartWay.com

Views: 67,925

Keywords: Vue.js, Vue, VueJS, Vue.js 2, Vue 2, VueJS 2, Vue.js Tutorial, Vue.js 2 Tutorial, VueJS Tutorial, Material Design, Vue.js 2 Material Design, vue-material, VueMaterial, Google Material Design, JavaScript, Web Development, Single page Application, User Interface, User Interface Design, Node.js, Vue CLI, Front-end, Frontend

Id: 1j8xTOmR8pw

Length: 28min 43sec (1723 seconds)

Published: Mon Jan 16 2017