Load the files into the new project folder (not into an already finished one, otherwise the files will be overwritten).

npx degit gisu/vueBoiler --force

If there is no package.json yet, initialize it with npm init. Then install the remaining packages. It is assumed that it is usually an existing Vue or Nuxt project, in which Vite, Typescript, Eslint etc. are already installed.

dependencies

npm i container-query-polyfill @tailwindcss/container-queries

devDependencies

npm i -D @vitejs/plugin-vue @vue/test-utils @vitest/ui vitest @babel/types @types/web-bluetooth vue-tsc postcss postcss-import postcss-nested tailwindcss plop msw jsdom cssnano autoprefixer

Then expand the script block of package.json:

"test:e2e": "cypress open",
"test:unit": "vitest run",
"test:unit:watch": "vitest",
"test:unit:ui": "vitest --ui",
"typecheck": "vue-tsc --noEmit",
"plop": "plop"

To be able to test the components also via Vitest the vite.config.js must be extended by a test block:

test: {
  include: ['tests/**/*.test.ts', 'src/components/**/*.test.ts', 'src/composables/**/*.test.ts'],
    environment: 'jsdom',
    deps: {
    inline: ['@vue']
  }
}

https://vitest.dev/

It is already prepared, in the file mocks/handlers.js the requests are noted which should be mocked. To connect the service worker:

npx msw init public/ --save

https://mswjs.io/

Cypress installs relatively easily, the installer helps you with that.

npx cypress open

More info about possible problems

• https://docs.cypress.io/guides/tooling/typescript-support

If you want autoimport for Plugins and Components, install the following Packages

npm i -D eslint-import-resolver-typescript unplugin-auto-import unplugin-vue-components

Than uncomment the comments in the eslintrc.js File, and extend the Vite Config in the Plugins section:

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

plugins: [
  Components({
    dirs: ['./src/components'],
    dts: true
  }),
  AutoImport({
    dts: './auto-imports.d.ts',
    defaultExportByFilename: false,
    vueTemplate: true,
    include: [
      /\.[tj]sx?$/,
      /\.vue\??/,
      /\.mdx?$/
    ],
    dirs: [
      './src/composables/**',
      './src/utils/**'
    ],
    imports: [
      'vue'
    ],
    eslintrc: {
      enabled: true,
      filepath: './.eslintrc-auto-import.json',
      globalsPropValue: true
    }
  })
]

Than extend the TSConfig with

{
  "files": ["auto-imports.d.ts", "components.d.ts"]
}

To use Storybook 7, the following packages must be installed.

npm i -D react react-dom storybook vue-loader eslint-plugin-storybook babel-loader @babel/core @storybook/addon-essentials @storybook/addon-interactions @storybook/addon-links @storybook/blocks @storybook/testing-library @storybook/vue3 @storybook/vue3-vite