All Projects → ratiw → Vuetable 2 With Laravel 5.4

ratiw / Vuetable 2 With Laravel 5.4

Sample project using Vuetable-2 in Laravel 5.4 and Laravel-Mix

Projects that are alternatives of or similar to Vuetable 2 With Laravel 5.4

Vuetable 2 Tutorial
Stars: ✭ 251 (+41.01%)
Mutual labels:  tutorial, component
Vue Draggable Resizable
Vue2 Component for draggable and resizable elements.
Stars: ✭ 2,431 (+1265.73%)
Mutual labels:  component
React Nprogress
⌛️ A React primitive for building slim progress bars.
Stars: ✭ 173 (-2.81%)
Mutual labels:  component
React Jw Player
A React Component API for JW Player
Stars: ✭ 174 (-2.25%)
Mutual labels:  component
Learn Vim
Learn the (arguably) best text-editor on the planet.
Stars: ✭ 173 (-2.81%)
Mutual labels:  tutorial
Es6 Tutorial
Essentials in JavaScript ES6 - A Fun and Clear Introduction
Stars: ✭ 175 (-1.69%)
Mutual labels:  tutorial
Web Crawler Tutorial
Python 網頁爬蟲入門實戰
Stars: ✭ 170 (-4.49%)
Mutual labels:  tutorial
Solid Tutorial Intro
Introductory tutorial to Solid
Stars: ✭ 177 (-0.56%)
Mutual labels:  tutorial
Epicsurvivalgameseries
Third-person Survival Game for Unreal Engine 4 (Sample Project)
Stars: ✭ 2,389 (+1242.13%)
Mutual labels:  tutorial
Spring Cloud Tutorial
Spring Cloud Tutorial.《Spring Cloud 教程》
Stars: ✭ 173 (-2.81%)
Mutual labels:  tutorial
Awesome Flutter
Curated list of bookmarks, packages, tutorials, videos and other cool resources from Google's Flutter
Stars: ✭ 174 (-2.25%)
Mutual labels:  tutorial
Fmxui
FMX跨平台基础UI库
Stars: ✭ 173 (-2.81%)
Mutual labels:  component
Astropy Tutorials
Tutorials for the Astropy Project
Stars: ✭ 174 (-2.25%)
Mutual labels:  tutorial
Learn Elm Architecture In Javascript
🦄 Learn how to build web apps using the Elm Architecture in "vanilla" JavaScript (step-by-step TDD tutorial)!
Stars: ✭ 173 (-2.81%)
Mutual labels:  tutorial
Tutorial About 3d Convolutional Network
Tutorial about 3D convolutional network
Stars: ✭ 177 (-0.56%)
Mutual labels:  tutorial
Psi4numpy
Combining Psi4 and Numpy for education and development.
Stars: ✭ 170 (-4.49%)
Mutual labels:  tutorial
React Native Gradient Buttons
A lightweight, customizable and haptic Gradient Button component for React Native
Stars: ✭ 174 (-2.25%)
Mutual labels:  component
React Component Echarts
React component echarts. 组件式百度图表。
Stars: ✭ 175 (-1.69%)
Mutual labels:  component
Alfresco Developer Series
Source code from the ecmarchitect.com Alfresco Developer Series tutorials
Stars: ✭ 177 (-0.56%)
Mutual labels:  tutorial
React Otp Input
✔️ OTP Input Component for React
Stars: ✭ 177 (-0.56%)
Mutual labels:  component

Sample project using Vuetable-2 with Laravel 5.4 and Laravel Mix

Trying this sample project

  • clone the repo to your local machine
  • cd into the directory
  • install laravel dependency packages using composer install
  • create .env file and generate APP_KEY using cp .env.example .env && php artisan key:generate
  • install client-side javascript packages dependency by npm install
  • run the project using php artisan serve or whatever appropriate in your machine setup.

You should see something like this.

image

Steps to use Vuetable-2 in your Laravel 5.4 project

  • create laravel 5.4 project

      laravel new vuetable-l54
    
  • go into the project directory and install node packages

      npm install
    
  • create .env file by copying from .env.example

      cp .env.example .env
    
  • generate APP_KEY

      php artisan key:generate
    
  • replace welcome.blade.php with the version in the repo or just add component

  • install additional babel plugins

      npm install babel-plugin-transform-runtime babel-preset-stage-2 babel-preset-es2015 --save-dev
    
  • install vuetable-2

      npm install vuetable-2 --save-dev
    
  • install vuetable-2 dependencies

      npm install accounting lodash moment vue-events --save-dev
    
  • create your Vue component in resources\assets\js\components

  • register the component in resources\assets\js\app.js

      Vue.component('my-vuetable', require('./components/MyVuetable.vue'));
    
  • compile using Laravel-Mix by running

      npm run dev
    
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].