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

05.

CSS: Styling a Component

|

Autoplay

Previous Challenge

Next Chapter

Login or register to check out the script

21 Comments

Sort By

Login or Register to join the conversation

davidmintz 4 years ago edited

Here's a warning I see in my console (using Vue 3).
<blockquote>
Feature flags VUE_OPTIONS_API, VUE_PROD_DEVTOOLS are not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.

For more details, see https://link.vuejs.org/feature-flags.
</blockquote>I was about to ask you to spoon-feed me the answer but then sighed and did my own homework like a good citizen. :-) PhpStorm's hinting and autocompleting makes it so easy even a noob can muddle through! You can get rid of this warning by adding this to webpack.config.js:


.configureDefinePlugin(() => ({
     __VUE_OPTIONS_API__: true,
     __VUE_PROD_DEVTOOLS__: false,
}))

3 |

shadowc davidmintz 4 years ago

Thanks for the tip!

In general, I would assume you could leave these flags undefined, but it definitely helps to have them!

|

It O. 6 years ago

Hey friends! We miss the code block in every video. It’s important to copy and paste in our code. The final code inside the dos loas its diferent than the current in each video. For example: all the css and html in this video. I hope yo can put them in every video like always.
Thanks

1 |

fred It O. 6 years ago

hi Alberto
Here the code :
https://github.com/SymfonyC...

1 |

It O. fred 6 years ago

Wow, thanks!

|

sadikoff It O. 6 years ago edited

Hey It O.

We are sorry about that, we have a little internal process where we add "code blocks" to the page - so they are not available immediately when chapter is released. We understand that it's a bit odd because Ryan said "copy the HTML from this page!"... but there is no HTML...yet
Anyways code blocks will be able soon!

Thanks for your attention to the details and watching new chapter as soon as it was released we really appreciate it!

Cheers!

|

Mark-V 2 years ago

I have a problem when i try to inject the <style>. It doesnt give an error but it does not give the syle to the page, what could be the problem?

|

weaverryan SFCASTS Mark-V 2 years ago

Hmm, I'm actually not sure :/. Parsing the <style> tag is the job of Webpack + the vue-loader that works with Webpack. I would try mis-typing style - e.g. <stly> just to see if you can trigger a build error in Webpack (and thus, make sure it's parsing this file correctly).

Cheers!

|

Luca 5 years ago edited

Hey Ryan + Team,

I know this issues does not really belong to this lecture, however, I could not find any solution to my issue in other lectures or on the web, so I decided to ask this here.
The point is, that I want to use a static image inside my vue component. The image lives in assets/static/images/image.jpg.
Referencing the image with <img src="/build/images/image.jpg"> does work, however, I am using .enableVersioning(Encore.isProduction()) in my webpack.config.js. So with hashing I don't know how to reference my image anymore since the hash changes for every build.
In twig this is usually handled like this, as far as I know:
src="{{ asset('build/images/image.jpg') }}" (from manifest.json)

Is there a way to handle this problem in vue as well? :-)

Cheers!

|

weaverryan SFCASTS Luca 5 years ago

Hey @Luca!

Great timing on this - I just answered this question a day or two ago :). The tl;dr is that it's easy! But... due to bad behavior between a few libraries... it's only kinda easy :p. Here is the answer: https://symfonycasts.com/sc...

On a philosophical Webpack level, the answer is "just import the image in the same way you would import another JavaScript file", which is kinda cool ;).

Let me know if that helps!

Cheers!

|

Jakob B. 6 years ago

Hey! It does not work for me. If I write simple css at the end of my vue-file, it will not include anything. It is simply ignored and does not work at all. Any ideas? I've done everything one-to-one...

|

weaverryan SFCASTS Jakob B. 6 years ago edited

Hey @Jakob!

Hmm. Can you post your Vue file for us? I know you're doing everything one-to-one, but maybe there is something tiny that's wrong - that's the hardest stuff to find :). Also, what version of vue, vue-loader, vue-style-loader and vue-template-compiler do you have? You can find this by running yarn list --depth=0.

Oh, and two more things - if you view source on the page, do you see a link tag for products.css? I want to make sure that is being included on the page (it is if you started with our code), And finally, when you run yarn watch what files does it say it is rendering? Do you see a products.css there?

Cheers!

|

Jakob B. weaverryan 6 years ago

Hey, thank you for your answer!

├─ vue-hot-reload-api@2.3.4
├─ vue-loader@15.9.3
├─ vue-style-loader@4.1.2
├─ vue-template-compiler@2.6.11
├─ vue-template-es2015-compiler@1.9.1
├─ vue@2.6.11

I've just a style tag in the end of the template🙂

|

Jakob B. Jakob B. 6 years ago

I am one step further: The .css is packed into the js directory, but it is not included on the page

|

Jakob B. Jakob B. 6 years ago

I fixed it - Thank you very much for your answer :)

|

weaverryan SFCASTS Jakob B. 6 years ago

Hey @Jakob!

Nice work! What was the final solution?

Cheers!

|

Jakob B. weaverryan 6 years ago

Hey!

I think one package was missing, I deleted node_modules and ran yarn install again :) It was a little weird, but now it works perfectly😀

1 |

Marco P. Jakob B. 5 years ago

Hey! unfortunately i have the same problem and this solution didn't work. The css file is not created ☹️

|

shadowc Marco P. 5 years ago

Hi Caprarolainfo!

Can you tell us a little bit more about your issue? Have you looked into your packages.json to see if your packages are all there and are the latest versions? That does seem like a webpack issue to me!

Let me know what you can find!

|

Marco P. shadowc 5 years ago

Hi Matias Jose!
Sorry if I wasted your time, I found the problem. 😳I wrote the link encore_entry_link_tags wrong. Now everything works.
Thanks so much

|

shadowc Marco P. 5 years ago

No problem! I'm glad you've found it! :)

|

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 Challenge

Next Chapter