The Delightful World of Vue

  • 3022 students
  • EN Captions
  • EN Script
  • Certificate of Completion

Your Guides

About this course

This course is also built to work with Vue 3!

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.30.0", // 0.30.2
        "axios": "^0.19.2", // 0.19.2
        "bootstrap": "^4.4.1", // 4.5.0
        "core-js": "^3.0.0", // 3.6.5
        "eslint": "^6.7.2", // 6.8.0
        "eslint-config-airbnb-base": "^14.0.0", // 14.1.0
        "eslint-plugin-import": "^2.19.1", // 2.20.2
        "eslint-plugin-vue": "^6.0.1", // 6.2.2
        "regenerator-runtime": "^0.13.2", // 0.13.5
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^8.0.0", // 8.0.2
        "vue": "^2.6.11", // 2.6.11
        "vue-loader": "^15.9.1", // 15.9.2
        "vue-template-compiler": "^2.6.11", // 2.6.11
        "webpack-notifier": "^1.6.0" // 1.8.0
    }
}

Ready to build an interactive frontend that you'll love! Look no further than Vue.js: a leader on the frontend world and one that you can sink your teeth into, even if JavaScript isn't your main gig. In this tutorial, we'll build a real-world "Products" area for our site using an API-Platform-powered API. Will it be a single-page application (SPA)? Nope! Not in this tutorial - because it turns out, integrating Vue into a "traditional" web app is actually a bit trickier:

Tip

Bonus! Along the way, we'll highlight the few differences needed to make this tutorial work with Vue 3.

  • Installing & Setting up Vue with Encore (including a nice eslint setup!)
  • All about the Vue object: let's make it feel boring!
  • Single file Components (SFCs)
  • Modular styles
  • Props, data & state! Ya know, the key to everything
  • v-bind, v-text, v-on, v-for, v-show: basically all the special v-STUFF!
  • Communication up the tree with $emit
  • Making (and organizing) AJAX calls
  • Organizing your files & adding Webpack "alias" shortcuts
  • methods, computed properties
  • v-model (what it really does)
  • Server-side searching and filtering
  • Passing data directly from your server to Vue via Twig
  • Watchers: what, when and when not

By the end of this tutorial, you'll feel comfortable - dare I say confident - in all the Vue basics!

Next courses in the JavaScript Frameworks & Tools: Vue section of the JavaScript Frameworks & Tools Track!

20 Comments

Sort By
Login or Register to join the conversation

If anyone has problems with composer install, because of doctrines ArrayCache -> set "doctrine/orm" to "2.8.5" or less in composer.json

1 | Reply |
Chapter2 avatar Chapter2 1 year ago edited

For those of you who do the tutorial with NodeJS v17+, adjust the scripts section of your package.json.
Some algorithms or key sizes used in this tutorial are no longer allowed by default with OpenSSL 3.0
`

    "watch": "SET NODE_OPTIONS=--openssl-legacy-provider && encore dev --watch",
    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && encore production --progress",

`

1 | Reply |
Krzysztof K. avatar Krzysztof K. 3 years ago

Great!

1 | Reply |
Kiuega avatar Kiuega 2 years ago

Hello ! I'm using PhpStorm to, but for webpack encore alias, there is no auto-completion for my javascript files (when we import some file using our alias). Maybe is there a configuration to set in PhpStorm to enable it ?

EDIT : Got it ! After searchs, it's in Settings > Javascript > Webpack > automatic.
Works very good <3 <3

| Reply |
Igor-P avatar Igor-P 3 years ago

Really nice introduction to the framework with a huge amount of best practices in details. Thank you.

The only thing you haven't mentioned is using vue outside symfony. Yep, I know it's symfonycasts.com website but sometimes (When should I do that? Should I?) even the initial symfony project is splitted into two "pure symfony API" and "pure SPA frontend" repos which are kind of independent therefore encore can't be used and at least that global categoryId variable should be somehow got in another way (from router?), not from twig template. Hope it will be covered in the second part of the course.

| Reply |

@weaverryan @shadowcplays
Why this does not cover the FORMS ? There is big hole between API Platform and Symfony Forms extension....
I saw many posts on the internet when nobody has normal process how to implement Form via API to javascript page like Vue, React or Angular. And the forms are the core part of many pages and if you create with symfony API-platform the separate front and back, you will hit the forms as wtf how to continue and get data from js forms to symfony by secure way.
This was the first reason why i abandoned the symfony framework on beginning because i stacked with my first easy 5 page site, where were 3 simple forms.. and it seems (on forums) like very difficult to do this if your front end is clear js framework which fetch and send data by API and js framework is not integrated via webpack...

| Reply |

Hi Mikolaj!

We will cover forms in part 2 of this Tutorial. So stay tuned for it!

1 | Reply |
Nathan D. avatar Nathan D. 3 years ago

Thanks ! Great tutorial ! :)

| Reply |
It O. avatar It O. 3 years ago

thank's guys, nice tutorial

| Reply |

I'm glad you like it!

| Reply |
It O. avatar It O. 3 years ago

Hey guys, release more chapters please! :)

| Reply |

We're on it! We release one new and exciting chapter every day from Monday to Friday

Cheers!

| Reply |
Delrei avatar Delrei 3 years ago

I'll buy access for this tutorial. Do you've an estimative when will be available completely?

| Reply |

Hey Delrei

This course it's been actively released, what it means that we deliver one new chapter every day (Monday to Friday). There're 20 chapters left so I would say it will be fully released in one month

| Reply |

I can't wait for the next chapters

| Reply |

Hi Wilco!

I'm glad you're liking this tutorial! We're releasing about 1 chapter a day with our current schedule (we try to release a group of Chapters near the start of each week)!

If you click on "Next Chapter" on the last recorded one, you might also get a sneak peak of what the next unreleased chapter will be (but no video)!

| Reply |
It O. avatar It O. 3 years ago

when?????

| Reply |

Monday! :)

2 | Reply |

I hope it's MPA, not SPA :)

| Reply |

It will be :). MPA's (multi page apps) - traditional apps that have Vue embedded into parts of them are actually trickier in my opinion than an SPA. We wanted to show that.

| Reply |

Delete comment?

Share this comment

astronaut with balloons in space

"Houston: no signs of life"
Start the conversation!