@graphiteds/vue v1.9.22
@graphiteds/vue
These are Vue 3 specific building blocks on top of @graphiteds/core components.
We recommend using vite or otherwise vue-cli v5 (with Webpack 5) for the best bundle sizes (due to tree-shaking). If you want to migrate from vue-cli v4 to v5: follow this guide.
Tested on:
Browser Support
We support only modern browsers.
npx browserslist "> 1%, last 2 versions, not dead, not ie 11"
So it doesn't run on legacy browsers: IE11, Edge 18 & below (Edge before it moved to Chromium), and Safari 10.
The advantage of this is we have less runtime within our builds, and having faster production builds by not having to also downlevel to es5. Plus you don't need any polyfills.
Using these components
Add this package to your project:
npm install @graphiteds/vue
Edit the main.js
/ main.ts
file of a Vue 3 project like this:
import { createApp } from "vue";
import App from "./App.vue";
import { GraphiteVue } from "@graphiteds/vue";
// Core CSS required for Graphite components to work properly
import "@graphiteds/vue/css/core.css";
createApp(App).use(GraphiteVue).mount("#app");
Import the component(s) you want to use:
import { GrButton } from "@graphiteds/vue";
Use it in your template as any Vue component:
// In kebab-case
<gr-button href="https://paqt.com">PAQT</gr-button>
// Or PascalCase
<GrButton href="https://paqt.com">PAQT</GrButton>
We recommend using kebab-case for our components and PascalCase for your own Vue components to make them visible distinct.
An example of this setup using vue-cli v4: https://codesandbox.io/s/graphiteds-vue3-example-jhk03.
Development
Follow the instructions in the root of this repo.
Test apps
In packages/vue/test-apps
there are test apps for vite, vue-cli v5, and vue-cli v4
In order to run them:
- Make sure you've run
npm run bootstrap
&npm run build
in the root of this repo - Navigate to a test app, for example
cd packages/vue/test-apps/vite
- Run
npm install
- Run
npm run sync
(this copies the relevant core & vue dist files to the node_modules of the test-app) - Run the project, for example
npm run dev
for vite ornpm run serve
for vue-cli
4 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago