Categoría: Vue

Map Chart Highcharts JS : Highmaps

Highcharts es una biblioteca de gráficos escrita en JavaScript puro, que ofrece una manera fácil de agregar gráficos interactivos a su sitio web o aplicación web. Head Debes colocarlo tres librerías en el dentro de header para poder compilar una mapa. style HTML Un componente de div donde se carga una vista de mapa Javascript

Tutorial POS Restaurante – Laravel + Vue.js Parte 6 : Enviar orden de pedidos

Base de datos Tabla de orden Tabla de pedidos Enviar Pedidos Laravel ( Backend) Modelo Modelo para dos tablas de Orden y Pedidos , ejecutar en comandos: app/Orden.php app/Pedidos.php Controller Comando para crear un controlador Función para crear pedidos app/Http/Controllers/API/OrdenController.php Route Una ruta para enviar pedidos desde API y dentro del prefijo API Vue.js (Frontend)

Tutorial POS Restaurante – Laravel + Vue.js Parte 5 : Manejo de Carritos

Iconos de Material Desing Agregar una linea de código en el Header de blade para poder cargar los iconos resources/views/welcome.blade.php Vue.js (Frontend) template Caja de carrito Botón de producto para agregar carrito data Methods función para convertir en formato de monedas Agregar carritos Eliminar item de carrito Cambiar cantidad del producto Sumar total de todos

Tutorial POS Restaurante – Laravel + Vue.js Parte 4 : Listar los productos en el POS

Tutorial completo Tutorial resumida Modulo de Productos Laravel (Backend) ProductoController.php Para listar en el modulo del Producto Cambiar el status del producto Ruta de api Vue.js (Frontend) component-producto.vue template Tabla de productos data methods Para cargar los productos Cambiar status del producto mounted Modulo de POS Laravel (Backend) ProductoController.php Mostrar los productos visibles con categorías

Tutorial POS Restaurante – Laravel + Vue.js Parte 3 : Crear producto y almacenar imagen

SQL Mysql Crear una tabla llamado productos y ejecutar en sql Vue.js (Frontend) Componente de component-producto.vue Crear un componente de vue resources/js/components/component-producto.vue Importar el componente en el app.js Variables Formulario de Producto Botón y Modal de Formulario del Producto Funciones de Methods Llamar los datos de categorías para listar los opciones en el select de

Tutorial POS Restaurante – Laravel + Vue.js Parte 2 : Categorías de producto

Tutorial anterior: Crear proyecto y plantilla bootstrap. Tutorial resumido Tutorial completo Crear una tabla de Categorías en la base de datos Laravel (Backend) Modelo de Categorías Crear un modelo categoría por medio de comando Codigo de app/Categorias.php Controlador Crear un controlador de Categoría en la carpeta de API por el comando Código de app/Http/Controllers/API/CategoriaController.php Crear

Tutorial POS Restaurante – Laravel + Vue.js Parte 1 : Creación de Proyecto y Componentes de Vue con Bootstrap

Tutorial completa Tutorial resumida Comando para crear proyecto Instalar Vue.js Ejecutar y compilar Crear dos componentes de Vue.js header-pos.vue resources/js/components/header-pos.vue component-pos.vue resources/js/components/component-pos.vue Importar componente en el App.js Plantilla de Blade Siguiente tutorial: Categorías de productos Plantilla bootstrap

Tutorial + Laravel + Vue – Chart

Cómo agregar un gráfico a un proyecto Laravel con Vue. Vue-chartjs es un contenedor para Chart.js en vue. Puede crear fácilmente componentes de gráficos reutilizables. Vue.js Instalar la libreria vue-chart Crear un archivo LineChart.js resources/js/components/LineChart.js Componentes donde va integrar gráficos resources/js/components/graficos.vue Crear un Componente en el resources/js/app.js Y agregar e html. Fuentes https://vue-chartjs.org/guide/#updating-charts