+ 

@squidit/vue-css

This repository contains a Vue3 component library developed to facilitate the creation of consistent and elegant interfaces, following a custom style guide. The included components are highly customizable and designed to be reusable across a variety of Vue3 projects.

⚡ Get the experience by browsing one of our platforms!

This framework provides low level utilities and UI components for building custom experiences.

Our Design System can be seen here

UI Components are currently offered as Vue3 (Web) components.

1. Node version >= 18
2. To use this library in your Vue3 project, you can install it via npm or yarn:

npm install @squidit/css @squidit/vue-css
# or
yarn add @squidit/css @squidit/vue-css

3. Import CSS into your global style (style.scss):

$fontsFolderPath: '~@squidit/css/dist/fonts'; /* Overwrite default font path */
@import '~@squidit/css/src/scss/squid.scss'; /* Import all Framework Styles */

4. Use VueCssPlugin into your main.ts:

import App from './App.vue'
import { createApp } from 'vue'
import VueCssPlugin from '@squidit/vue-css'
import './style.scss'

createApp(App).use(VueCssPlugin).mount('#app')

5. vue-css includes i18n in its own structure, if you want to use it, just pass the messages in the plugin options:

const getProjectMessages = () => ({
  en: {test: 'Test'},
  es: {test: 'Prueba'},
  pt: {test: 'Teste'},
  de: {test: 'prüfen'},
})

app.use(VueCssPlugin, { messages: getProjectMessages() })

6. To control the language used:

<script setup lang="ts">
import { t, changeLocale } from '@squidit/vue-css'

changeLocale('pt')

const test = t('test')
</script>

<template>
  {{ test }}
  {{ t('test') }}
</template>

<style scoped></style>

After installation, you can import and use the components as needed in your Vue3 components:

<script setup lang="ts">
import { SqLoader } from '@squidit/vue-css'
</script>

<template>
  <SqLoader />
</template>

<style scoped></style>

This library allows high flexibility and customization of the components. You can modify the default styles of the components using specific props or by overriding the styles via CSS.

This project is licensed under the MIT License.