V3-CRM

Hi! So you've decided to use v3-crm for your system, that's good! Now check the instructions how you can apply it in your project

Setup

npm i v3-crm

Also for good work you need to install next libraries:

npm i v3-core-ui v3-filter-core

Setup in the app

/* main.ts */

import App from './App.vue';
import v3crm from 'v3-crm'
import 'v3-crm/dist/style.css'

// Configs
import routesConfig from '../routes.config';
import adminConfig from '../admin.config';


const app = createApp(App);
app.use(v3crm.v3Crm, { routesConfig, adminConfig})

app.mount('#app');

The example how to add in the Vue template

<!-- App.vue -->

<template>
  <div>
    <V3Crm />
  </div>
</template>

<script lang="ts">

export default {
};
</script>

<style lang="scss" scoped></style>

The example for routesConfig

The example how to create routes in the admin panel

/* routes.config.js */ 

export default [
  {
    path: '/',
    name: 'home',
    icon: 'ti-home',
    component: () => import('@/pages/vs-home-page.vue'),
  },
  {
    path: '/help',
    name: 'help',
    label: 'Допомога',
    icon: 'ti-help',
    component: () => import('@/pages/vs-help-page.vue'),
  },
  {
    path: '/profile',
    name: 'profile',
    label: 'Profile',
    icon: 'ti-user-circle',
    component: () => import('@/pages/vs-profile-page.vue'),
  },
  {
    type: 'collapse',
    label: 'Благоустрій',
    icon: 'ti-table',
    data: [
      {
        path: '/green_space.table',
        name: 'green_space',
        props: {
          table: 'green_space.table',
        },
        component: 'table-page',
        label: 'Зелені насадження',
        children: [
          {
            path: ':id',
            component: 'default-card',
          },
        ],
      },
      {
        path: '/street_furniture.table',
        name: 'street_furniture',
        component: 'table-page',
        props: {
          table: 'street_furniture.table',
        },
        label: 'Елементи благоустрою',
        children: [
          {
            path: ':id',
            component: 'default-card',
          },
        ],
      },
    ],
  },
];

The example for adminConfig

/* admin.config.js */

const prefix = import.meta.env.MODE === 'development' ? '/api' : ''

export default { server: { prefix } };