SymfonyCasts stands united with the people of Ukraine
// 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.
eslint setup!)v-bind, v-text, v-on, v-for, v-show: basically all the special v-STUFF!$emitv-model (what it really does)By the end of this tutorial, you'll feel comfortable - dare I say confident - in all the Vue basics!
Your Guides
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
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.
@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...
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
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)!
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.
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",