Open artshade opened 2 months ago
There is also a PR for vite-vue https://github.com/tsconfig/bases/issues/246
There is 2 ways to create a vue SPA:
npm create vite@latest my-vue-app -- --template vue
npm create vue@latest
The 2 tsconfig are different, what is the recommendation ?
There is 2 ways to create a vue SPA:
- with vite :
npm create vite@latest my-vue-app -- --template vue
- with create-vue :
npm create vue@latest
The 2 tsconfig are different Source
Cheers! Indeed, those differ, but it must be due to the options available, and the second options (create vue@latest
or create-vue
since npm
appends create-
automatically) is the recommended in the most cases I do believe, and create-vite
package seems to be not mentioned at the Vue official documentation pages.
For new projects, it is now recommended to use create-vue to scaffold Vite-based projects. Source
$ npm create vue@latest
This command will install and execute create-vue, the official Vue project scaffolding tool. Source
create-vue
, the official project scaffolding tool, offers the options to scaffold a Vite-powered, TypeScript-ready Vue project. Source
In contrast, Vite scaffolding solution seems to be more Vite-oriented rather than Vue specifically to also present the less-opinionated defaults between featured directions, universality, or agnostic trait:
Scaffolding Your First Vite Project
... You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite + Vue project, run:
npm create vite@latest my-vue-app -- --template vue
create vite@latest
Just in case, if the first option mentioned (i.e. create vite@latest
) is for TypeScript, it's probably vue-ts
template, that is create-vite/template-vue-ts/tsconfig.json
of package create-vite. It also has a TSConfig reference inside for additional config-file "./tsconfig.node.json"
.
This scaffolding options seems to be copying the required files without additional complex processing if compared to the second option.
create vue@latest
- In the second scaffolding option (i.e. create vue@latest
), the final tsconfig.json
is created programmatically with more conditions and options, where the final tsconfig.json
gets "rendered" selectively per feature:
if (needsTypeScript) {
render('config/typescript')
// Render tsconfigs
render('tsconfig/base')
// The content of the root `tsconfig.json` is a bit complicated,
// So here we are programmatically generating it.
const rootTsConfig = {
// It doesn't target any specific files because they are all configured in the referenced ones.
files: [],
// All templates contain at least a `.node` and a `.app` tsconfig.
references: [
{
path: './tsconfig.node.json'
},
{
path: './tsconfig.app.json'
}
]
}
if (needsCypress) {
render('tsconfig/cypress') // ...
if (needsCypressCT) {
render('tsconfig/cypress-ct') // ...
if (needsPlaywright) {
render('tsconfig/playwright') // ...
if (needsVitest) {
render('tsconfig/vitest') // ...
The two are different, but they face the same problem, how to type-check a DOM application and a NODE ones.
Dear Developers and Community,
Thank you very much for the project!
Just to clarify, knowing it being mentioned at the official TypeScript documentation, have you considered adding the TypeScript configuration files to the fairly official repository "Centralized Recommendations for TSConfig bases" - tsconfig/bases?
There is one for Nuxt and Vite (for React) it seems.
Best and kind regards ✨