racl101 + vuejs   110

Uploading Files With VueJS and Axios - Server Side Up
This actually worked well. It shows how to create a form with a file upload field and submit it via ajax (using Axios.js) library and how to handle, or receive the file upload on the server using Laravel (PHP framework.)
blog  tutorial  howto  example  create  form  file  upload  vuejs  vue2  vue  multipart  html5  ajax  axios  javascript  guide  reference  laravel  php  server 
6 weeks ago by racl101
Build a modern web application with Laravel and Vue
Really good tutorial demonstrating how to build a single page application (SPA) with a backend powered by Laravel with Passport and a front-end powered by VueJS. As of February 2019, it is 5 parts.

I'm using this tutorial as the basis for Onboard V3 Prototype app.
blog  tutorial  laravel  laravel5  spa  app  single  page  application  web  passport  json  token  jwt  api  vue  vuejs  vue2  javascript  framework 
8 weeks ago by racl101
php - Vue.js / Laravel - Handle logout correctly - Stack Overflow
Added my own example of how to implement a logout link for a SPA with an API powered by Laravel 5 using Passport and a front end powered by VueJS.
stackoverflow  howto  example  guide  reference  spa  laravel  laravel5  passport  api  frontend  backend  logout  link  revoke  token  vue  vuejs  vue2  javascript 
8 weeks ago by racl101
BootstrapVue
Pretty good Vue JS library to incorporate with VueJS / Vue 2 projects. Easy enough to install and use.
bootstrap  vue  vuejs  vue2  library  component  bootstrap4  github  documentation  guide  reference  manual  tutorial  howto  example 
8 weeks ago by racl101
Route Meta Fields | Vue Router
Use meta fields to pass info about a route. For example, if a route should be protected by authentication.
vue  vuejs  vue2  vue-router  router  documentation  guide  reference  tutorial  howto  example  meta  fields  route 
8 weeks ago by racl101
Handling Authentication In Vue Using Vuex ― Scotch.io
This tutorial has some good ideas about using vuex to implement authentication but at times it can be hard to follow because it uses es2015 syntax.
interesting  scotch.io  blog  tutorial  ue  vuejs  vue2  authentication  vuex  store  example  howto  guide  reference  toread  tolearn  totry  tounderstand  javascript  es2015 
8 weeks ago by racl101
Authentication Best Practices for Vue - Sqreen Blog | Modern Application Security
This tutorial has some good ideas about using vuex to implement authentication but at times it can be hard to follow because it uses es2015 syntax.
blog  tutorial  vue  vuejs  vue2  authentication  vuex  store  github  gist  example  howto  guide  reference  toread  tolearn  totry  tounderstand  javascript  es2015 
8 weeks ago by racl101
javascript - Vue - Cannot set property of undefined in promise - Stack Overflow
TLDR:

If using ES2015 then use arrow notation to fix these issues.

E.g.

.then((response) => { //do something that calls this object }

If using ES5 then you need to assign this to an outside variable like so.

var that = this;
.then(function(response) { // do something that calls that }
stackoverflow  howto  vue  javascript  fix  example  troubleshoot  property  undefined  within  promise  anonymous  function  this  object  vuejs  vue2  guide  reference  tolearn  tounderstand  es2015  arrow  notation 
8 weeks ago by racl101
Is there a way to reset a component? · Issue #702 · vuejs/vue
Cool trick to reset component data to its initial values on VueJS (Vue2).
github  forum  vue  vuejs  vue2  howto  example  reset  component  data  object  assign  javascript  guide  reference  context 
8 weeks ago by racl101
vue-tables-2 - npm
This is a great and easy to use VueJS 2 library / component to create an HTML table in the style of the jQuery DataTables plugin and supports the following:

- Searching / Filtering (for all rows in table with one text field filter or individually for any column via text field filter)
- Dropdown Filtering (for an individual column)
- Ordering
- Loading data through Ajax from an API (and it has a convenient Laravel server example to implement searching /filtering and pagination)
github  project  vuejs  vue2  vue  data  table  datatable  component  library  ajax  searching  ordering  filtering  laravel  server  side  php  laravel5  implementation  documentation  npm  repository 
july 2018 by racl101
Using Vue with bootstrap select and refreshing options · Issue #397 · vuejs/Discussion
This forum / thread response was helpful in helping me integrate Bootstrap-select jQuery plugin with VueJS / Vue 2 so that the dropdown is reactive. That is, so that the data comes from the VueJS app through an array and when the array is updated so are the options on the dropdown.
github  forum  thread  response  bootstrap-select  jquery  plugin  vuejs  vue2  vue  javascript  howto  example  guide  reference  integrate 
june 2018 by racl101
bootstrap-select
We use this jQuery plugin on Onboard 2 to make select dropdowns more interactive, such as providing a text field for filtering those dropdown menus. Works well with Bootstrap 3.

It is also possible to integrate it with VueJS / Vue 2 to make it reactive.

Refer to:

https://github.com/vuejs/Discussion/issues/397#issuecomment-306797064
bootstrap-select  plugin  jquery  select  menu  dropdown  filter  input  field  bootstrap  bootstrap3  vue  vuejs  vue2 
june 2018 by racl101
javascript - Using lodash in all of vue component template - Stack Overflow
Shows ways that you could include a library for use within Vue.js project. It's a very VueJS way of making lodash available even within .vue single page templates. This approach can be used to include other data, possibly passed from PHP and generated in the head of the HTML document.

TLDR: Examples:

import lodash from 'lodash';
Object.defineProperty(Vue.prototype, '$lodash', { value: lodash });


Object.defineProperty(Vue.prototype, '$laravel', { value: window.Laravel });
stackoverflow  howto  example  use  JavaScript  library  within  vue  vuejs  vue2  single  page  templates  lodash  guide  reference 
may 2018 by racl101
Use Any Javascript Library With Vue.js
Good tutorial. Shows ways that you could include a library for use within Vue.js project. It's a very VueJS way of making lodash available even within .vue single page templates. This approach can be used to include other data, possibly passed from PHP and generated in the head of the HTML document.

TLDR: Examples:

import lodash from 'lodash';
Object.defineProperty(Vue.prototype, '$lodash', { value: lodash });


Object.defineProperty(Vue.prototype, '$laravel', { value: window.Laravel });
blog  tutorial  howto  example  use  JavaScript  library  within  vue  vuejs  vue2  single  page  templates  lodash  moment  toread  tolearn  tounderstand  guide  reference 
may 2018 by racl101
bootstrap-select with Vue.js - JSFiddle
This example effectively demonstrates how to make a select (dropdown) menu that is powered by Bootstrap Select (jQuery Bootstrap 3 plugin) have its state managed by VueJS and therefore make it reactive (i.e. upon changing the drop down value the state changes and is reflected anywhere where the state is being used within the purview of Vue)
jsfiddle  fiddle  howto  example  vue  vuejs  vue2  bootstrap  bootstrap3  jquery  select  dropdown  plugin  bootstrap-select  combine  reactive  guide  reference 
may 2018 by racl101
Event Handling — Vue.js
Use these modifiers (.prevent) to prevent forms from submitting or (.stop) to stop hyperlinks from changing page.
vue  vuejs  vue2  documentation  modifiers  tutorial  guide  reference  preventdefault  submit  click  stop  tolearn  tounderstand  events 
may 2018 by racl101
haydenbbickerton/vue-charts: *UNSUPPORTED* Google Charts plugin for Vue.js
Pretty good Vue JS add-on / plugin to use Google Charts plugin to create charts as Vue Components.
github  project  vue-charts  google  charts  vue  vuejs  vue2  javascript  library  tutorial  documentation  demo 
may 2018 by racl101
Mixins — Vue.js
Mixins are a good way to share / reuse component methods or computed (methods) between reusable components. Note, if you are creating methods for altering output from component data within mustache template strings like for example: converting decimal numbers into currency strings, then what you are looking for is Vue Filters instead which are globally declared methods for altering output that can be used between any Vue component.

Update: mixins don't work well with beforeRouteEnter(to, from, next) { } portions of components (if using vue-router package). If you need to apply behavior to every route use Global router before guard instead.

e.g. router.beforeEach((to, from, next) => { ... } and add this to your router.js file or whatever file you define your routes.
vue  vuejs  vue2  reusable  methods  share  mixins  component  guide  reference  documentation  tutorial  toread  tolearn  tounderstand 
may 2018 by racl101
State Management — Vue.js
Use Vuex to handle state management in your application. That is, if you have a complicated application, such as a single application and you don't want one particular parent component to handle the state, i.e. be the source of truth, you can use Vuex which is Vue's implementation of Flux architecture, to manage state so that all your Vue components get its source of truth from one place. The official documentation (in English) for Vuex can be found here: https://vuex.vuejs.org/en/
vuejs  vue  vue2  state  management  vuex  flux  between  components  single  ultimate  source  of  truth  guide  reference  documentation  tutorial  toread  tolearn  tounderstand 
may 2018 by racl101
Form Handling · Vuex
Shows how to use model binding to make form input fields reactive with your VueJS apps / components.
vue  vuejs  vue2  forms  handling  model  binding  tutorial  documentation  guide  reference  toread  tolearn  tounderstand 
may 2018 by racl101
Slots — Vue.js
Use slots in your component templates when you want to create reusable components where you want to be able to pass dynamic HTML (or even other reusable components) as child components within the tags of the parent components. Useful for when you don't know exactly what the child components or HTML nodes in your main component will be.
vue  vuejs  vue2  components  slots  documentation  guide  reference  tutorial  toread  tolearn  tounderstand 
may 2018 by racl101
vue.js - Is there any way to trigger component method from parent in VueJS? - Stack Overflow
In short, refs is a nice way for a parent component to refer to a particular child component after instantiation (when communicating via props might not be an option), and even execute a child component's method directly.
stackoverflow  vue  vuejs  vue2  howto  trigger  execute  component  child  method  from  parent  example  guide  reference 
may 2018 by racl101
vue.js - VueJs 2.0 - how to listen for `props` changes - Stack Overflow
In short: using watchers is a nice way to let your component know that data provided to it by way of props has changed which can be used to change your component's own data, which btw, is the only way to achieve reactivity. In other words, reactivity won't occur simply by changing the data to provided to the component through props. You need to use a watcher to listen for changes after component instantiation.
stackoverflow  vue  vuejs  vue2  howto  make  component  listen  props  changes  watch  watcher  data  example  guide  reference 
may 2018 by racl101
Computed Properties and Watchers — Vue.js
If you have a reusable Vue component that gets its own data from the values of the props that it's passed by the parent component and you plan to update values of the props from the parent after instantiation then you should use create a watcher for the prop in the reusable component that updates the data of that same component.
vuejs  vue2  vue  watchers  documentation  guide  reference  props  data  toread  tolearn  totunderstand 
may 2018 by racl101
matfish2/vue-tables-2: Vue.js 2 grid components
This is a great and easy to use VueJS 2 library / component to create an HTML table in the style of the jQuery DataTables plugin and supports the following:

- Searching / Filtering (for all rows in table with one text field filter or individually for any column via text field filter)
- Dropdown Filtering (for an individual column)
- Ordering
- Loading data through Ajax from an API (and it has a convenient Laravel server example to implement searching /filtering and pagination)
github  project  vuejs  vue2  vue  data  table  datatable  component  library  ajax  searching  ordering  filtering  laravel  server  side  php  laravel5  implementation  documentation 
may 2018 by racl101
Filters — Vue.js
You can use filter to modify text output via mustache interpolations within components and have these filters available globally where you use Vue. E.g.

create a currencyFilter or converting decimals into currency formatted strings. Refer to: https://stackoverflow.com/questions/43208012/how-do-i-format-currencies-in-a-vue-component/48550430#48550430 for that solution.
vue  vuejs  vue2  documentation  guide  reference  howto  add  create  filter  function  global  toread  tolearn  tounderstand  totry 
may 2018 by racl101
Laravel 5.5 VueJs 2.0 CRUD Operations Application - iTech Empires
Really nice and fairly easy to understand tutorial demonstrating how to do an entire CRUD page demonstrating how to do a listing, create form page, update form page and delete functionality.
blog  tutorial  howto  crud  laravel  laravel5  vue  vuejs  vue2  bootstrap  bootstrap3  example  guide  reference  toread  tolearn  totry  tounderstand 
may 2018 by racl101
vue-spinner
Nice collection of loading graphic components.
vue  vuejs  vue2  vue-spinner  library  component  loading  graphics  spinner 
may 2018 by racl101
javascript - Vue JS 2.0 not rendering anything? - Stack Overflow
This line is important:

From the author -- 2.0 standalone build means (compiler + runtime). The default export of the NPM package will be runtime only, because if installing from NPM, you will likely pre-compile the templates with a build tool.
stackoverflow  howto  troubleshoot  issues  vuejs  vue2  not  rendering  build  compiler  runtime  npm  export  package  include  tool  explanation  guide  reference 
april 2018 by racl101
Resolve
For VueJS 2 you might want to do something like this:

resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
webpack  documentation  guide  reference  tutorial  manual  path  resolver  npm  toread  tolearn  tounderstand  vue2  vuejs 
april 2018 by racl101
« earlier      
per page:    204080120160

related tags

$data  $options  access  add  addon  ajax  angular  angularjs  animation  anonymous  antipattern  api  apis  app  application  apply  architecture  array  arrow  as  assign  attributes  auth  authentication  axios  azure  babel  backend  base  before  beforeCreate  beforeMount  best  bestpractices  between  bind  binding  bindings  blade  blog  bootstrap  bootstrap-select  bootstrap3  bootstrap4  build  builds  button  changes  chartjs  charts  check  checkboxes  child  chrom  ci  class  clear  click  combine  commonjs  comparison  compilation  compile  compiler  component  components  computed  conditional  conditionally  configuration  console  constants  consume  context  continuous  continuousintegration  control  convert  cookbook  correctly  create  created  crud  css  currency  d3  data  datatable  deep  deeply  define  demo  demos  design  developer  development  diagram  different  disable  django  docker  documentation  dropdown  dynamically  dzone  element  eloquent  end  enter  environment  error  es6  es2015  event  events  example  examples  execute  explanation  export  express  expressjs  extend  extension  fiddle  field  fields  file  filter  filtering  fix  flux  fontawesome  form  format  forms  forum  framework  frameworks  from  front  frontend  function  get  getting  gettingstarted  gist  github  global  google  grab  graph  graphic  graphics  grid  guard  guide  guider  handling  hide  highlighting  hooks  howto  html5  http  implementation  import  include  index  initial  initialize  input  install  installation  instance  integrate  integration  interesting  international  introduction  issue  issues  javascript  jquery  js  jsfiddle  json  jwt  laracasts  laravel  laravel5  laravel5.4  laravelmix  libraries  library  lifecycle  link  list  listen  load  loading  lodash  logout  make  management  manager  manual  medium  menu  meta  method  methods  migration  mismatch  mixins  modal  model  modifiers  module  modules  moment  mounted  move  multipart  multiple  mustache  nested  node  nodejs  not  notation  notification  npm  number  object  of  on  ordering  other  outside  overview  package  packagecontrol  packages  page  parent  pass  passport  path  patterns  perspective  php  plugin  practices  preventdefault  production  project  promise  properties  property  props  pug  rails  react  reactive  reactivity  reactjs  read  ready  reasons  reference  registration  rendered  rendering  repository  require  reset  resolver  response  reusable  revoke  ror  route  router  rubyonrails  runtime  scotch.io  screencast  script  searching  select  server  setup  share  shopify  show  side  single  slot  slots  source  spa  spinner  stackoverflow  standalone  started  state  stop  store  string  style  sublime  sublimetext  sublimetext3  submit  syntax  tab  table  tables  task  template  templates  theme  this  thread  to  token  tolearn  tool  toread  totry  totunderstand  tounderstand  towatch  transitions  trigger  troubleshoot  truth  tutorial  ue  uiv  ultimate  undefined  updated  upload  url  use  validation  view  visualizations  vue  vue-charts  vue-router  vue-spinner  vue-template-compiler  vue.js  vue.set  vue.use  vue2  vuejs  vuetables2  vuex  watch  watched  watcher  watchers  web  webpack  within  wordpress  wrapper  z-index 

Copy this bookmark:



description:


tags: