Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine

The Delightful World of Vue

5:05:52

What you'll be learning

This course is also built to work with Vue 3!
// 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!


Your Guides

Matias Ryan Weaver

Buy Access
Login or register to track your progress!

Join the Conversation?

19
Login or Register to join the conversation
Chapter2 Avatar
Chapter2 Avatar Chapter2 | posted 5 months ago

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. Avatar Krzysztof K. | posted 2 years ago

Great!

1 Reply
Kiuega Avatar

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. Avatar Igor P. | posted 2 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
Miky Avatar

@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. Avatar Nathan D. | posted 2 years ago

Thanks ! Great tutorial ! :)

Reply
It O. Avatar

thank's guys, nice tutorial

Reply

I'm glad you like it!

Reply
It O. Avatar

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

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

when?????

Reply
Sergiu P. Avatar

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
Cat in space

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