getting-started-with-vue/

[utterances-bot]

Vue Tutorial: An Overview and Walkthrough | Tania Rascia

We're in a golden era of JavaScript libraries and frameworks. More and more companies are building out full, dynamic web apps in addition to…

https://www.taniarascia.com/getting-started-with-vue/

[ivan-alles]

I started learning Vue with this tutorial. It covers all steps from installing Vue to the deployment on GitHub Pages. The tutorial helped me to finish my first app. Great work!

[arturmilkowski]

I agree. It is one of the best Vue tutorials for start. It shows key aspects of this library.

[maugeya]

Excellent tutorial, really helped me to understand the basics of Vue but there is one typo in the code. In the block:

<td v-else>
    <button @click="editMode(employee.id)">Edit</button>
    <button @click="$emit('delete:employee', employee.id)">Delete</button>
  </td>

The second button should be

<button @click="$emit('delete:employee', employee)">Delete</button>

[aalainn]

Really great overview over the main aspects of vue.js! It's also a great reference for people like me who forget fast what they learned :-) Thanks alot!

[keperkjr]

This was a really well written intro article. Learned a lot. Thanks! 👍

[hoppinjohnz]

I went through this tutorial twice and a half because it is so well-written and fun to do. 2.5 times also helped me to convert my back-end development mind set around towards the front-end.

If you only see a black page when deploying to GitHub, make sure to write "publicPath: '/vue-app/'" in the vue.config.js file before building your dist folder. That's about the only debugging I had to do to get my build up to run at GitHub. Thanks a lot for publishing this!

[hoppinjohnz]

Here is my work product of this awesome tutorial. Again, thanks alot.

[taniarascia]

Nice work!

[poneymusical]

Thanks for the tutorial, it's great! As a primarily backend developer, I'm just starting to dive into frontend. Vue is the first SPA tech I check, it looks easier to learn than React.

I just found one small "issue" in the tutorial. When you click on "Edit" on one line, modify the name or the email, then click on "Edit" on another line without saving or cancelling, changes are not saved nor rollbacked. I changed the behavior of EmployeeTable to make it rollback changes in that case:

editMode(employee) {
  if (this.editing !== null) this.cancelEdit(this.currentEmployee);
  this.currentEmployee = employee;
  this.cachedEmployee = Object.assign({}, employee);
  this.editing = employee.id;
},

cancelEdit(employee) {
  Object.assign(employee, this.cachedEmployee);
  this.editing = null;
  this.currentEmployee = null;
},

Is it the right approach? Thanks for your feedback!

[jkfliu]

Thanks Tania so much for this tutorial, really a great way to start learning Vue!

[Hochul822]

Thanks so much for this great tutorial. I learned a lot.

[rodricke]

Great tutorial. Thanks.

[smdalton]

Best tutorial I have found on Vue.js, clear and to the point and without including too many dependencies or special packages that will be soon out of date. Going to use this to help me build my next front end.

[rezapurnamaa]

Really comprehensive tutorial. Easy to follow and understandable. Thanks a lot!

[lollylegs]

Great tutorial. Thanks

[atapas]

Hey Tania,

This is a great tutorial for a beginner to Vue like me. I have now created a TODO app following this article. Thanks for sharing!

One small thing I noticed while following it,

The edit handler passing the employee id. I think, it should be the employee object there?

<button @click="editMode(employee.id)">Edit</button>

as the editMode function tries to extract the id anyways,

editMode(employee) {
  this.cachedEmployee = Object.assign({}, employee)
  this.editing = employee.id
},

Thanks!

P.S. I am a big fan of your articles. Please keep sharing.

[GhazB]

Love the EmployeesTable reference to Silicon Valley :)

[theccalderon]

Awesome tutorial!

[imliuyzh]

Hi, very nice tutorial! When do you think you will update this to Vue 3?

[hseritt]

Great article. It is still the best full CRUD tutorial on Vue in 2021. I do see one issue with the editEmployee function on Vue 3.

Failed to compile.

./src/components/EmployeeTable.vue
Module Error (from ./node_modules/eslint-loader/index.js):

/home/hseritt/Documents/Development/sandbox/tr-vue-tutorial/src/components/EmployeeTable.vue
  80:11  error  Unexpected mutation of "employees" prop  vue/no-mutating-props

✖ 1 problem (1 error, 0 warnings)

[hseritt]

Never mind. I should have checked your updated Github :-D Thanks again for the tutorial :-)

[Cardoso-topdev]

Thank you very much for your great article.

[uferekalu]

Nice tutorial with good explanation...

[jlonuz]

Thanks Tania for this tutorial, I liked so much, and it was very helpfull!

[robot5x]

Thank you! This is such a great tutorial - took me from a Vue newbie, to building my own app in a day or so. Really helped me understand lots about it. Great work.

[HumphreyHao]

Much thanks for this tutorial! Now I can start designing me app XD.

[haroon-dev]

Thank you! for this wonderful tutorial but I can't understand one thing, why you don't use $emit in edit button <button @click="editMode(employee.id)">Edit like this delete button <button @click="$emit('delete:employee', employee.id)">Delete