vue-laravel-crud

npm i vue-laravel-crud

How its work?:

This component implements a table and actions to create, modify, delete by calling a standard api

• GET apiUrl/modelName - Retrieve paginated listing
• POST apiUrl/modelName/:id - Create item
• PUT apiUrl/modelName/:id - Update item
• DELETE apiUrl/modelName/:id - Delete item

Dependency:

• bootstrap-vue
• axios
• vuedraggable

Full Example:

JavaScript

import VueLaravelCrud from "vue-laravel-crud";

export default {
    
  components: { VueLaravelCrud },
  data() {
    return {
        title: "Crud Title",
        modelName: 'users'
        model: {
            name: "",
            email: "",
        },
        columns: [
            { label: "Name", prop: "name", type: "text" },
            { label: "Email", prop: "age", type: "number" },
        ],
        selected: null,
        //....
    };
  },
  methods:{
      onSelect(item){
          this.selected = item;
      }
     //....

  },

};

HTML

<vue-laravel-crud :title="title" :modelName="modelName" :model="model" :columns="columns">
    <template v-slot:form="slotProps">
        <b-form-group label="Name:" description="Your Name">
            <b-form-input
            v-model="slotProps.item.name"
            type="text"
            required
            placeholder="Name"
            ></b-form-input>
        </b-form-group>
    </template>
    <template v-slot:show="slotProps">
        <b-list-group>
            <b-list-group-item class="d-flex justify-content-between align-items-center">Id<b-badge variant="primary" pill>{{ slotProps.item.id }}</b-badge></b-list-group-item>
            <b-list-group-item class="d-flex justify-content-between align-items-center">Nombre<b-badge variant="primary" pill>{{ slotProps.item.title }}</b-badge></b-list-group-item>
        </b-list-group>
    </template>
</vue-laravel-crud>

HTML

Selected: {{ selected ? selected.name : 'none' }}
<vue-laravel-crud :title="title" :modelName="modelName" :model="model" :columns="columns" @select="onSelect($event)">

    <template slot="cell-name" slot-scope="slotProps">
            <!-- Custom Cell Template cell-(prop) -->
        <span class="bg-primary">{{ slotProps.item.name }}</span> 
    </template>


    <template v-slot:tableActions="slotProps">
        <span>Slot Actions</span>
    </template>
    <template v-slot:tableActionsRight="slotProps">
        <span>Slot Right Actions</span>
    </template>

    <template v-slot:rowAction="slotProps">
        <b-button variant="primary" @click="slotProps.showItem(slotProps.item.id, slotProps.index)"><b-icon-eye></b-icon-eye></b-button>
    </template>

    <template v-slot:form="slotProps">
        <b-form-group label="Name:" description="Your Name">
            <b-form-input
            v-model="slotProps.item.name"
            type="text"
            required
            placeholder="Name"
            ></b-form-input>
        </b-form-group>
    </template>

    <template v-slot:show="slotProps">
        <b-list-group>
            <b-list-group-item class="d-flex justify-content-between align-items-center">Id<b-badge variant="primary" pill>{{ slotProps.item.id }}</b-badge></b-list-group-item>
            <b-list-group-item class="d-flex justify-content-between align-items-center">Nombre<b-badge variant="primary" pill>{{ slotProps.item.title }}</b-badge></b-list-group-item>
        </b-list-group>
    </template>
</vue-laravel-crud>

Configuration

Propiedad	Descripción	Tipo	Valor
modelName	Nombre del modelo	String	requerido (ej.: users)
model	Estructura del modelo	Object	requerido (ej.: { id: 0 })
models	Lista de modelos	Array	requerido (ej.: [])
ajax	Habilitar llamadas AJAX	Boolean	opcional, predeterminado: true
useVuexORM	Usar Vuex ORM	Boolean	opcional, predeterminado: false
columns	Array de columnas	Array	requerido (ej.: [{ label:"Id", prop: "id", type: "number" }])
filter	Filtros de búsqueda	Array	opcional, predeterminado: []
enableFilters	Habilitar filtros	Boolean	opcional, predeterminado: false
infiniteScroll	Desplazamiento infinito	Boolean	opcional, predeterminado: false
sortable	Habilitar ordenamiento	Boolean	opcional, predeterminado: false
orderable	Habilitar reordenamiento	Boolean	opcional, predeterminado: false
validate	Validación de elementos	Boolean	opcional, predeterminado: false
orderProp	Propiedad de ordenamiento	String	opcional, predeterminado: "order"
createMultipart	Crear elementos multipart	Boolean	opcional, predeterminado: false
apiUrl	URL base de la API	String	opcional, predeterminado: "/api"
search	Término de búsqueda	String	opcional, predeterminado: ""
hideModalAfterSave	Ocultar modal después de guardar	Boolean	opcional, predeterminado: true
refreshAfterSave	Actualizar después de guardar	Boolean	opcional, predeterminado: true
showPaginator	Mostrar paginador	Boolean	opcional, predeterminado: true
showCreateBtn	Mostrar botón de creación	Boolean	opcional, predeterminado: true
showSearch	Mostrar campo de búsqueda	Boolean	opcional, predeterminado: true
showHeader	Mostrar encabezado	Boolean	opcional, predeterminado: true
showTitle	Mostrar título	Boolean	opcional, predeterminado: true
limit	Elementos por página	Number	opcional, predeterminado: 20
displayMode	Modo de visualización	Number	opcional, predeterminado: 1
displayModeToggler	Habilitar cambio de modo	Boolean	opcional, predeterminado: false
colXs	Columnas en pantallas XS	Number	opcional, predeterminado: 12
colSm	Columnas en pantallas SM	Number	opcional, predeterminado: 12
colMd	Columnas en pantallas MD	Number	opcional, predeterminado: 6
colLg	Columnas en pantallas LG	Number	opcional, predeterminado: 4
colXl	Columnas en pantallas XL	Number	opcional, predeterminado: 3
selectHover	Seleccionar al pasar el mouse	Boolean	opcional, predeterminado: false
selectClick	Seleccionar al hacer clic	Boolean	opcional, predeterminado: false
cardClass	Clase de tarjeta	String	opcional, predeterminado: ""
listContainerClass	Clase de contenedor de lista	String	opcional, predeterminado: ""
listItemClass	Clase de elemento de lista	String	opcional, predeterminado: ""
cardHideFooter	Ocultar pie de tarjeta	Boolean	opcional, predeterminado: false
searchPlaceholder	Marcador de posición de búsqueda	String	opcional, predeterminado: "Buscar..."
tableContainerClass	Clase de contenedor de tabla	String	opcional, predeterminado: ""
tableClass	Clase de tabla	String	opcional, predeterminado: ""
grouped	Agrupar elementos	Boolean	opcional, predeterminado: false
groupedAttribute	Atributo de agrupación	String	opcional, predeterminado: "name"
groupedLabelPre	Etiqueta de grupo anterior	String	opcional, predeterminado: ""
groupedLabelAfter	Etiqueta de grupo posterior	String	opcional, predeterminado: ""
draggableGroup	Grupo arrastrable	String	opcional, predeterminado: "people"
draggableOptions	Opciones de arrastre	Object	opcional, predeterminado: { clone: false }

Messages

Propiedad	Descripción	Tipo	Valor
messageRemoveConfirm	Mensaje de confirmación de eliminación	String	opcional, predeterminado: "¿Está seguro de borrar este elemento?"
messageRemove	Mensaje de eliminación	String	opcional, predeterminado: "BORRAR"
messageNew	Mensaje de nuevo elemento	String	opcional, predeterminado: "Nuevo"
messageEmptyResults	Mensaje de resultados vacíos	String	opcional, predeterminado: "No se han encontrado resultados"
messageNoMore	Mensaje de fin de resultados	String	opcional, predeterminado: "No hay más elementos para mostrar."
messageLoading	Mensaje de carga	String	opcional, predeterminado: "Cargando..."
messageSave	Mensaje de guardar	String	opcional, predeterminado: "Guardar"
messageDefaultValidationError	Mensaje de error de validación por defecto	String	opcional, predeterminado: "Por favor controle el formulario, contiene errores."