// 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
!$emit
v-model
(what it really does)By the end of this tutorial, you'll feel comfortable - dare I say confident - in all the Vue basics!