How to apply single quotes in Vue templates in a Nuxt3 project using Prettier?

Question

I know this is an older question, but I still haven't found a solution.

In my Nuxt3 project, I want to use single quotes in all Vue templates. If there are nested layers, I prefer single quotes to enclose double quotes.

Below are my settings related to the question:

// package.json

{

  "scripts": {
    "format": "prettier --write '**/*.{js,ts,vue}'",
    "lint": "eslint --fix --ext .ts,.js,.vue ."
},
  "prettier": {
    "singleQuote": true
  },
  "dependencies": {
    "@nuxtjs/eslint-config-typescript": "^12.1.0",
    "@typescript-eslint/parser": "^6.9.0",
    "eslint": "^8.52.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.1",
    "prettier": "^3.0.3",
  }
}

// user > setting.json

{
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": true
}

// .eslintrc.cjs

  rules: {
    'prettier/prettier': ['error', { singleQuote: true }],
  },

// .prettierrc

{
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

These are the methods that I've found on StackOverflow.

I've tried them all. However, none of them worked for me.

1. Cmd + Shift + P > Format Document With … > Prettier - Code formatter

2. Code > Preferences > Settings, then look for Quote, select Prettier and check both boxes (Prettier: JSX single quote & Prettier: single quote) Reference: https://stackoverflow.com/a/53621884/22782380

3. Disable the Volar extension

If anyone has more recent methods to achieve this, please let me know. Thank you.