Vue abbreviation not working in VS code with Emmet

Question

I am learning vue and using VS code, I am trying to fix an issue in VS code, if I type vue and press tab I am not getting the boilerplate code like shown in this video at 3:29, I found some solutions like adding some code in settings.json file but none of them worked, I even reinstalled VS code but the issue remains, I added these lines to my settings file :

 "emmet.triggerExpansionOnTab": true,
  "files.associations": {
      "*html": "html",
      "*njk": "html"
  },
  "emmet.useInlineCompletions": true,
  "emmet.includeLanguages": {
       "javascript": "javascriptreact",
       "typescript": "typescriptreact",
       "vue-html": "html",
       "vue": "html",
       "razor": "html",
       "plaintext": "pug",
       "django-html": "html"
 },
 "emmet.showSuggestionsAsSnippets": true,
 "emmet.showExpandedAbbreviation": "always",  

None of these worked.