Chapters

48 Chapters | 5:05:52 |

01

Encore, Symfony & API Platform

7:15
02

Installing Vue, Webpack & Eslint

8:57
03

Vue Instance & Dynamic Data

6:10
04

Single File Component

4:17
05

CSS: Styling a Component

4:51
06

data() and Vue Dev Tools

4:28
07

Creating a Child Component

5:09
08

Props: Passing Info into a Child Component

4:49
09

v-bind: Dynamic Attributes

6:39
10

Modular CSS

7:06
11

Webpack dev-server: Faster Updating

6:20
12

HMR: See Changes without Reloading

4:36
13

Organizing into more Components

6:08
14

Aliases

5:05
15

Looping with v-for

7:39
16

v-on & methods: User Interaction

8:33
17

Magic "this" & its Properties

7:29
18

Reactivity

7:55
19

v-if, v-show and Conditional Classes

5:12
20

Computed Properties

5:58
21

Where should a Piece of Data Live?

7:06
22

Communication UP with $emit

5:49
23

Using Shared CSS

5:08
24

Ajax with Axios

5:41
25

The await Keyword

7:34
26

Product Listing Components

8:13
27

Product Details & Smart vs Dumb Components

8:51
28

Loading Component

5:35
29

Dynamic Categories via Ajax

5:30
30

Passing data From the Server to Vue

6:46
31

Reading Server Data & :global Classes

7:18
32

Page Context "Service"

8:12
33

Filtering the Products

4:51
34

Smarter Loading: Ajax status as State

8:00
35

Ajax Services

7:54
36

Skipping Ajax: Sending JSON Straight to Vue

6:37
37

Faking Ajax calls: Reading Synchronously

6:06
38

Passing Props vs Fetching Directly

6:36
39

Hoisting Data Up

6:52
40

The Formidable v-model

7:04
41

Pass Data in a Custom Event & Internal Data

6:41
42

Filtering Products

3:47
43

Async Computed Properties

9:00
44

Debouncing: Data can Hold Anything

4:18
45

Business Logic Helpers

5:57
46

Adding an [x] to our Search Bar

4:19
47

Watchers: The Good, The Bad & The Useful!

6:18
48

Adding a Watcher

5:13

> JavaScript Frameworks & Tools > The Delightful World of Vue

Buy Access to Course

02.

Installing Vue, Webpack & Eslint

|

Autoplay

Previous Chapter

Next Chapter

Login or register to check out the script

18 Comments

Sort By

Login or Register to join the conversation

ThibautPalma 2 years ago HIGHLIGHTED

If like me you get JS warnings because some feature flags are "not explicitly defined", you can add them to the config this way:

const Encore = require('@symfony/webpack-encore');
// eslint-disable-next-line import/no-extraneous-dependencies
const Webpack = require('webpack'); // not exactly an extraneous dependency since it actually comes from @symfony/webpack-encore (so no need to add it to package.json)

...

const config = Encore.getWebpackConfig();
config.plugins.push(
    new Webpack.DefinePlugin({
        __VUE_OPTIONS_API__: true,
        __VUE_PROD_DEVTOOLS__: false,
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
    }),
);

module.exports = config;

1 |

Victor SFCASTS ThibautPalma 2 years ago

Hey ThibautPalma,

Thank you for sharing this tip with others!

Cheers!

|

Ali_M 3 years ago

Hello and thank you for this tutorial. About the eslint config file, I have already placed it inide the root dir of my app. Given that I am using the vscode, and that I have already installed the eslint extension, how can I tell vscode to look into the external eslint config file? Thank you.

|

Victor SFCASTS Ali_M 3 years ago

Hey Ali,

We all use PhpStrom in SymfonyCasts, so I'm not sure how to configure it in VSCode in particular, you probably better google it, I bet there should be an answer about it in the internet. Otherwise, try to look at the VSCode/plugin configuration, I think there should be something obvious there.

Cheers!

|

sasa1007 4 years ago

I'm not sure what's updated but since a couple of days ago I don't think it's enough to install

yarn add vue@^2.5 vue-loader@^15 vue-template-compiler --dev

it was necessary for me to install

"@vue/compiler-sfc"

|

shadowc sasa1007 4 years ago

Hi Sasa!

Can you post here what error did you get and what version of Vue was actually installed (i.e. package.json)?

If I understand correctly, Vue 2 uses vue-loader version 15 and vue-template-compiler, while Vue 3 uses vue-loader version 16 and @vue/compiler-sfc. It looks like you've installed Vue 3!

|

sasa1007 shadowc 4 years ago edited

For me It is not worked even with fresh copy of symfony and webpack (this documentation https://symfony.com/doc/current/frontend/encore/vuejs.html)


{
"dependencies": {
  "@ckeditor/ckeditor5-build-classic": "^26.0.0",
  "@ckeditor/ckeditor5-vue2": "^1.0.5",
  "@vue/compiler-sfc": "^3.1.5",   // with this everything work fine
  "axios": "^0.21.1",
  "haversine-distance": "^1.2.1",
  "js2excel": "^1.0.1",
  "moment": "^2.29.1",
  "vue": "^2.5",
  "vue-loader": "^15.9.5",
  "vue-template-compiler": "^2.6.12",
  "vuetify": "^2.4.7"
}
}

|

shadowc sasa1007 4 years ago edited

If you do

<blockquote>yarn list vue</blockquote>

What do you see?

If you have Vue 3.x installed, then vue-template-compiler won't work!

|

sasa1007 shadowc 4 years ago

vue@2.6.14

|

shadowc sasa1007 4 years ago

Hrmm... I'm not sure what the problem might be then. Vue 2.6.x *should* work with vue-loader and vue-template-compiler. What error messages do you get when trying to run yarn watch?

|

Christian shadowc 2 years ago edited

I have the same problem - it doesnt work with vue version 3.3.4 ... any solutions so far?

EDIT: i solved the problem (for me) by replacing .enableVueLoader(() => {}, {version: 3}) with .enableVueLoader() .
But I then still install vue version 3 with npm i vue[at]next vue-loader[at]next --save-dev

This solved the problem for me so far - I will do some more tests with that setup ...

|

weaverryan SFCASTS Christian 2 years ago

Hey @Christian!

That's super weird that this would make a difference, but if it works, it should be good! That version stuff controls exactly how the loader is hooked up in Encore... and it should either not work at all, or work. So if it's building, I bet you will be ok :).

Cheers - and thanks for posting what worked for you.

|

dayday 5 years ago

where do we get the .eslintrc from?

|

MolloKhan SFCASTS dayday 5 years ago

Hey there,

If you download the course code from this page you can get it from it or, you can search for a template file like this one (and tweak it to your needs) https://gist.github.com/adr...

Cheers!

|

DennisdeBest 6 years ago edited

Hello ! Thanks for the tutorial it is helping me a lot to optimize my default Symfony/VueJs base. I now have the HMR working nicely however when I go into production mode and run yarn build I get some MiniCssExtract plugin errors I can't find a solution for (for the last couple of hours ...)

I find something like :


     [KQP3] ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/resolve-url-loader??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./assets/scss/pdf.scss 1.48 KiB {mini-css-extract-plugin} [depth 0] [built] [failed] [1 error]
         ModuleConcatenation bailout: Module is not an ECMAScript module

when running with yarn build --verbose. I have seen a couple a of github issues and stack overflow questions that seem to say you need to use require and not import in the typescript files but this seems like something that is not the problem anymore.

Some reckon that the


.addAliases({
    '@': path.resolve(__dirname, 'assets', 'js'),
    styles: path.resolve(__dirname, 'assets', 'scss'),
  })

Breaks stuff when you import with @import ~styles/variables instead of just @import variables (some even say that it's without ending with .scss that it breaks ...)

On other once I have read that the MiniCssExtractPlugin needs the esModule option set to false ...

All this to say I have looked everywhere and tried all of the above but I might be completely missing something.

This is probably not much information to work with and not a lovely question but any hints will be greatly appreciated ;)

Thanks for all the courses !

|

shadowc DennisdeBest 6 years ago

Hi Denis!

It's hard to know what the issue would be given the information provided. Since the issue is SCSS related, I don't think this would have anything to do with TypeScript. Are your packages up to date? Are you referring to our tutorial or your own project? Have you tried upgrading the packages and removing the localIdentName config entry in the webpack.config.js file? Are you running the production script in your same local environment or have you checked the repo out in a production server? Remember "dev" packages won't install if your env is "production". In this case, the idea is that you bluild your production files locally and then commit them, so you don't have to download and do complex stuff in the prod server.

May be you can give us some more info?

|

DennisdeBest shadowc 5 years ago

Hi thanks for the help, I'm sorry to only reply now, I never see disqus notifications, something I have to work on aswell.

It is based on the tutorial but my dev environment always runs with docker-compose.yml, alpine based images and traefik to get everything to communicate.

The packages are upto date, maybe I'm missing an apk on alpine node but I can't see anything that points me in that direction.

My packages are in dev locally and in production gitlab-ci builds them and rsyncs them to the /public/build. I can't see any depencies that minicssextract would need that are not in the correct part of the package.json

Stuff works now but still brings up some errors. Anyway thanks for your reply it's not something urgent for me

|

weaverryan SFCASTS DennisdeBest 5 years ago edited

Hey DennisdeBest!

Hmm. Let's simplify a little bit :). On your dev locally, if you run yarn encore production and then try it, do you see the error? I want to rule out that the hold gitlab-ci & rsync process isn't part of the problem (I can't think why it would be, but we need to eliminate it).

Cheers!

|

This course is also built to work with Vue 3!

Vue 2

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
    }
}

Previous Chapter

Next Chapter