4 spaces indentation when creating a VueJS component

>When I am creating a Vue component i always have to switch manually to 2 spaces

Please can you elaborate on this? What do you mean by switching to 2 spaces?

>Even when i click on "Configure Indents for Vue" it shows me the settings for HTML

not sure what action you refer to, please can you clarify?

<template> section code uses HTML code style indents (Settings | Editor | Code Style | HTML | Tabs and Indents), <script> code - Javascript preferences (Settings | Editor | Code Style | JavaScript | Tabs and Indents), so setting both to 2 spaces should work.

The only known issue is that the code is shifted to the right instead of being aligned with tags. This problem is caused by the lack of dedicated code style settings for .vue files; it's tracked as https://youtrack.jetbrains.com/issue/WEB-30382. As a workaround, try adding script and style entries into Settings | Editor | Code Style | HTML | Other, Do not indent children of list.

Hi,

Ok now it works well when i create a component.

But doesn't work on App.vue (wich is provided by the installation ov VueJS). When i say it doesn't work I am talking about <script> everything inside is indented with 4 spaces (yep i did the trick in with "do not indent children of").

Did you try re-formatting App.vue? it's auto-generated by Vue CLI and thus is not supposed to follow the IDE code style preferences on creation

Here is my explanation.

When installing Vue you have ESLint rules. Those ESLint rules want you to have 2 spaces ident / tabs in <template> and <style> ... 

But when i am creating a component with right > new > vue component it's setup at 4 spaces in template and style.

On creating, new component is normally formatted according to code style preferences if Reformat according to style is enabled in template settings; so the formatting should match the one you get on choosing Code | Reformat code