I am aware flat config with eslint removed extends.

However, I am now unsure how to use the following:

'eslint:recommended',
'plugin:vue/vue3-recommended',
'prettier',

I have looked online and at each repo and seen that the should be added as follows:

import js from '@eslint/js';
import eslintConfigPrettier from 'eslint-config-prettier';
import pluginVue from 'eslint-plugin-vue';

export default [
    ...pluginVue.configs['flat/recommended'],
    {
        files: ['**/*.js', '**/*.vue'],
        ignores: ['node_modules/**', 'public/**'],
        rules: {
            ...js.configs.recommended.rules,
            'vue/multi-word-component-names': 'off',
        },
    },
    eslintConfigPrettier,
];

This seems odd, why are they added in different places? There does not seem to be a common place to add them?