@webpros/tsxblocklist v1.0.99-beta.5
Vue3 specific Metafiles
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.
Install Packages
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
Extend script
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"
Vitest
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']
}
}
Mock Service Worker
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
E2E Tests
Cypress installs relatively easily, the installer helps you with that.
npx cypress open
More info about possible problems
Autoimport
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"]
}
Storybook
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
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
6 months ago
7 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
10 months ago
8 months ago
8 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago