Skip to content
Snippets Groups Projects
Commit 1fab21f6 authored by JeanClement's avatar JeanClement
Browse files

init project

parents
No related branches found
No related tags found
No related merge requests found
node_modules
dist
\ No newline at end of file
# Vue 3 project template
This template includes :
- Vue 3
- [Vuetify 3](https://vuetifyjs.com/en/components/all/)
- Typescript
- ESlint
- npm packaging configuration
- [vitest](https://vitest.dev/guide/)
- [storybook](https://storybook.js.org/docs/vue/get-started/whats-a-story)
## Files to modify for the npm packaging
This template is configured to build and publish an npm package on GitLab, following this [tutorial](https://forgemia.inra.fr/metabohub/mth/-/wikis/mth2-wp5-t3/webcomponents-npm).
Replace 'ComponentExample' with the name of the component to publish in these files :
- lib/main.js
- package.json
- vite.config.ts
The package will be published with the GitLab CI.
## Use the package in another project
```sh
npm i -D @metabohub/component-example
```
If your project is not using vuetify, you need to import it in `src/main.ts` :
```ts
import { createApp } from 'vue'
import App from './App.vue'
import { vuetify } from "@metabohub/component-example";
createApp(App).use(vuetify).mount('#app')
```
Use the component :
```ts
<script setup lang="ts">
import { ComponentExample } from "@metabohub/component-example";
import "@metabohub/component-example/dist/style.css";
import type { SomeType } from "@metabohub/component-example";
</script>
<template>
<ComponentExample />
</template>
```
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-check
```sh
npm run type-check
```
### Compile for Production
```sh
npm run build
```
### Run Unit Tests with [Vitest](https://vitest.dev/)
```sh
npm run test:unit
```
Check the coverage :
```sh
npm run coverage
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```
### View stories with [Storybook](https://storybook.js.org/docs/vue/get-started/whats-a-story)
```sh
npm run storybook
```
import { defineConfig } from "cypress";
export default defineConfig({
e2e: {
specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
baseUrl: "http://localhost:5173",
},
});
describe("Home", () => {
it("test", () => {
cy.visit("/")
})
})
\ No newline at end of file
/// <reference types="cypress" />
// ***********************************************
// This example commands.ts shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
//
// declare global {
// namespace Cypress {
// interface Chainable {
// login(email: string, password: string): Chainable<void>
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
// }
// }
// }
\ No newline at end of file
// ***********************************************************
// This example support/e2e.ts is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')
/// <reference types="vite/client" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>viz-style-manager</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
This diff is collapsed.
{
"name": "@metabohub/viz-style-manager",
"version": "0.0.0",
"private": false,
"description": "Vue component",
"scripts": {
"serve": "vite preview",
"build": "vite build",
"test:unit": "vitest --environment jsdom",
"coverage": "vitest run --coverage",
"test:e2e": "start-server-and-test dev http://localhost:5173 'cypress open'",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"dev": "vite",
"preview": "vite preview --port 4173",
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"main": "./dist/viz-style-manager.umd.js",
"module": "./dist/viz-style-manager.es.js",
"type": "module",
"files": [
"dist"
],
"exports": {
".": {
"import": "./dist/viz-style-manager.es.js",
"require": "./dist/viz-style-manager.umd.js"
},
"./dist/style.css": "./dist/style.css"
},
"types": "./dist/index.d.ts",
"dependencies": {
"@mdi/font": "^7.4.47",
"roboto-fontface": "*",
"vue": "^3.4.15",
"vuetify": "^3.5.2",
"webfontloader": "^1.6.28"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.7.2",
"@storybook/addon-essentials": "^8.0.3",
"@storybook/addon-interactions": "^8.0.3",
"@storybook/addon-links": "^8.0.3",
"@storybook/blocks": "^8.0.3",
"@storybook/vue3": "^8.0.3",
"@storybook/vue3-vite": "^8.0.3",
"@types/jsdom": "^21.1.6",
"@types/node": "^20.11.14",
"@types/webfontloader": "^1.6.38",
"@vitejs/plugin-vue": "^5.0.3",
"@vitest/coverage-v8": "^1.2.2",
"@vue/eslint-config-prettier": "^9.0.0",
"@vue/eslint-config-typescript": "^12.0.0",
"@vue/test-utils": "^2.4.4",
"@vue/tsconfig": "^0.5.1",
"cypress": "^13.6.4",
"eslint": "^8.56.0",
"eslint-plugin-storybook": "^0.8.0",
"eslint-plugin-vue": "^9.21.1",
"jsdom": "^24.0.0",
"prettier": "^3.2.4",
"start-server-and-test": "^2.0.3",
"storybook": "^8.0.3",
"typescript": "^5.3.3",
"vite": "^5.0.12",
"vite-plugin-dts": "^3.7.3",
"vite-plugin-vuetify": "^2.0.1",
"vitest": "^1.2.2",
"vue-cli-plugin-vuetify": "^2.5.8",
"vue-tsc": "^1.8.27"
},
"license": "Apache-2.0"
}
public/favicon.ico

4.19 KiB

<template>
<v-app>
<v-main>
<ComponentExample />
</v-main>
</v-app>
</template>
<script setup lang="ts">
import ComponentExample from "./components/ComponentExample.vue";
</script>
<template>
<h2>Component example</h2>
<v-btn>Test vuetify button</v-btn>
</template>
<script setup lang="ts"></script>
<style scoped></style>
export { default as StyleManager } from "./StyleManager.vue";
import { StyleManager } from "@/components";
import type { SomeType } from "@/types/SomeType";
import vuetify from "@/plugins/vuetify";
export { vuetify, StyleManager };
export type { SomeType };
import { createApp } from "vue";
import App from "./App.vue";
import vuetify from "./plugins/vuetify";
import { loadFonts } from "./plugins/webfontloader";
loadFonts();
createApp(App).use(vuetify).mount("#app");
// Plugins
import { loadFonts } from "./webfontloader";
import vuetify from "./vuetify";
export function registerPlugins(app: any) {
loadFonts();
app.use(vuetify);
}
// Styles
import "@mdi/font/css/materialdesignicons.css";
import "vuetify/styles";
// Vuetify
import { createVuetify } from "vuetify";
export default createVuetify();
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
/**
* plugins/webfontloader.js
*
* webfontloader documentation: https://github.com/typekit/webfontloader
*/
export async function loadFonts() {
const webFontLoader = await import(
/* webpackChunkName: "webfontloader" */ "webfontloader"
);
webFontLoader.load({
google: {
families: ["Roboto:100,300,400,500,700,900&display=swap"],
},
});
}
export interface LinkStyle {
display ?: boolean;
stroke?: string;
strokeWidth?: number;
opacity?: number;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment