Being a developer, I was noticing that there is so much hype about Vue.js in the dev community. I've worked with React.js and I love this amazing JavaScript library. I kinda regret that I could not document my React.js learning journey but this time I'm going to document each and everything about Vue.js.
📝 I believe in learning by doing, so I'll be building a small todo app with Vue and in this blog post, I'm going to document about that. Let's start!
📦 Install @vue/cli
With the help ofVue CLI, we'll be creating our first project together, a todo app. Vue CLI is an npm package and it provides the Vue commands in your terminal. With the help of Vue CLI, you can quickly prototype withvue serve andvue build commands
Node Version Requirement
While working with Vue CLI you've to have Node.js version 8.9 or above (8.11.0+ recommended). You can manage multiple versions of Node on the same machine withnvm ornvm-windows.
💻 Start building
First install Vue CLI by running these commands
$npminstall-g@vue/cli-service-global//or$yarnglobaladd@vue/cli-service-globalTo create a new project, run:
$vuecreateToDoAfter running the above command you will be prompted to pick a preset. Choosing preset totally boils down to developer choice. Default preset is good for quick prototyping but ofcourse you can choose manually, if you want to.
$cdToDoOpen the project in your editor and in component folder delete theHelloWorld.vue and create a file namedTodo.vue and paste this piece of code in it.
<template><div><h1>{{msg}}</h1><p>Hereyoucanmanageyourdailyactivites</p><divclass="container col-sm-12 col-md-8 col-lg-6 mt-5 justify-content-center"><b-rowclass="justify-content-center"><b-input-groupclass="shadow"prepend="Item"><b-form-inputv-model="task"@keyup.enter="addItem"range="true"type="text"placeholder="Enter here"></b-form-input><b-input-group-append><date-pickerv-model="date"lang="eng"format="YYYY-MM-DD"value-type="date"type="date"></date-picker><b-button@click="addItem"variant="info">+</b-button></b-input-group-append></b-input-group></b-row><divclass="container mt-4"><b-rowclass="items mb-1 justify-content-center shadow"v-for="(item,index) in tasks":key="{index}"><divclass="w-100 d-flex justify-content-between"><div><divclass="ml-3 p-2"><spanv-if="item.dueDate"class="item--date">{{item.dueDate.toDateString()}}</span><spanv-elseclass="item--date">NoDueDate</span><span>{{item.dueTask}}</span></div></div><div><b-button@click="removeItem(index)"class="rounded p-2"variant="primary">Remove</b-button></div></div></b-row></div></div></div></template><script>importDatePickerfrom"vue2-datepicker";exportdefault{components:{DatePicker},name:"Todo",props:{msg:String},// data for appdata(){return{id:0,task:"",tasks:[],date:""};},methods:{//method for adding itemaddItem(){if(this.task){this.tasks.push({dueTask:this.task,dueDate:this.date});}else{alert("Enter Item");}this.task="";this.date="";},//method for removing itemremoveItem(index){this.tasks.splice(index,1);}}};</script><!--CustomScopedStyles--><stylescoped>.row{margin-right:0;margin-left:0;}.bg-success{background-color:#d9e75d!important;}.item--date{margin-right:50px;color:rgb(77,9,145);border-bottom:1pxdottedrgb(77,9,145);background-color:rgb(230,247,156);}.mx-datepicker{max-width:118px;}</style><!--Customstyles--><style>.mx-input-wrapper{height:100%;}.mx-input{width:100%;height:100%!important;border-radius:0px!important;}</style>Go inApp.vue component and change code in your script tag and paste this piece of code.
importToDofrom"./components/ToDo.vue"exportdefault{name:"app",components:{ToDo,},}I'm using vue2-datepicker for date picking purpose and you can read more about this packagehere and for installing this package run:
$npminstallvue2-datepicker--saveI'm using bootstrap, so install bootstrap-vue by running this command:
npminstallvuebootstrap-vuebootstrapIf you're done with installing packages the last step is to go tomain.js file and paste this code:
importVuefrom"vue"importAppfrom"./App.vue"importBootstrapVuefrom"bootstrap-vue"import"bootstrap/dist/css/bootstrap.css"import"bootstrap-vue/dist/bootstrap-vue.css"Vue.use(BootstrapVue)Vue.config.productionTip=falsenewVue({render:h=>h(App),}).$mount("#app")🎉 Congratulations, you just built a todo app. Go and run:
npmrunserveNow visit localhost to see your todo app.
You can see complete code at thisGitHub Repo.
If you've any questions or feedback, message me on Twitter. I'd love to hear from you.
Peace ✌️
Top comments(2)
- LocationSan Francisco Bay Area
- EducationEE-CS Engineer turned Software Developer
- WorkVP of DevRel (DX Eng., Content & Community) RapidAPI ❯ Google Dev Expert ❯ GitHub Star ❯ NodeCLI.com
- Joined
Keep it up! 💯
- Email
- EducationB.Sc Computer Science
- Joined
Your words mean a lot, Thank you!
For further actions, you may consider blocking this person and/orreporting abuse
