Software
SPA on Laravel 5.4 and Vuejs2 - how to use middleware?
I'm developing SPA at first time. I't easy to use middleware in Laravel, but I have no Idea how to use it in Vuejs. I have 2 types of user and how can I give them an access to specific pages only? Unauthorized users should have access to home page only.
no mousedown events on elements in quasar
My quasar version is 0.14, and I merage quasar to vue-cli and webpack template, so I change some vue-cli config, it works, but there is only one little problem, no showRipple effect when click elements, then I compare quasar-cli that has four events on element click,mousedown,mouseleve and mouseup, but my quasar element only has one event click, I do not know why and how to fix it, so help, thank you very much.
I show configs I changed for quasar, and github links
webpack.base.config.js
```
var path = require('path') var utils = require('./utils') var config = require('../config') var vueLoaderConfig = require('./vue-loader.conf') function resolve (dir) { return path.join(__dirname, '..', dir) } module.exports = { entry: { app: './src/main.js' }, output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { // add for quasar quasar: path.resolve(__dirname, '../node_modules/quasar-framework/'), src: path.resolve(__dirname, '../src'), assets: path.resolve(__dirname, '../src/assets'), '@': path.resolve(__dirname, '../src/components'), variables: path.resolve(__dirname, '../src/themes/quasar.variables.styl'), // end for quasar 'vue$': 'vue/dist/vue.esm.js', // '@': resolve('src') } }, module: { rules: [ { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') } }, { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] } }```
index.html
```
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <title>auto-activity</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>```
package.json
```
{ "name": "auto-activity", "version": "1.0.0", "description": "A Vue.js project", "author": "shangwenlong652 <dxcqcv@gmail.com>", "private": true, "scripts": { "server": "node app.js", "migrate": "knex --knexfile=./server/config/knexfile.js migrate:latest", "rollback": "knex --knexfile=./server/config/knexfile.js migrate:rollback", "dev": "node build/dev-server.js", "start": "node build/dev-server.js", "build": "node build/build.js", "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", "e2e": "node test/e2e/runner.js", "test": "npm run unit && npm run e2e", "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" }, "dependencies": { "knex": "^0.13.0", "koa": "^2.3.0", "koa-bodyparser": "^4.2.0", "koa-jwt": "^3.2.2", "koa-logger": "^3.0.1", "koa-router": "^7.2.1", "mysql": "^2.13.0", "quasar-extras": "0.x", "quasar-framework": "git+https://git@github.com/quasarframework/quasar-edge.git", "objection": "^0.8.5", "vue": "^2.3.3", "vue-router": "^2.6.0" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-eslint": "^7.1.1", "babel-loader": "^7.1.1", "babel-plugin-istanbul": "^4.1.1", "babel-plugin-transform-runtime": "^6.22.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "chai": "^3.5.0", "chalk": "^2.0.1", "chromedriver": "^2.27.2", "connect-history-api-fallback": "^1.3.0", "copy-webpack-plugin": "^4.0.1", "cross-env": "^5.0.1", "cross-spawn": "^5.0.1", "css-loader": "^0.28.0", "cssnano": "^3.10.0", "eslint": "^3.19.0", "eslint-config-standard": "^6.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-html": "^3.0.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^2.0.1", "eventsource-polyfill": "^0.9.6", "express": "^4.14.1", "extract-text-webpack-plugin": "^2.0.0", "file-loader": "^0.11.1", "friendly-errors-webpack-plugin": "^1.1.3", "html-webpack-plugin": "^2.28.0", "http-proxy-middleware": "^0.17.3", "inject-loader": "^3.0.0", "karma": "^1.4.1", "karma-coverage": "^1.1.1", "karma-mocha": "^1.3.0", "karma-phantomjs-launcher": "^1.0.2", "karma-phantomjs-shim": "^1.4.0", "karma-sinon-chai": "^1.3.1", "karma-sourcemap-loader": "^0.3.7", "karma-spec-reporter": "0.0.31", "karma-webpack": "^2.0.2", "lolex": "^1.5.2", "mocha": "^3.2.0", "nightwatch": "^0.9.12", "opn": "^5.1.0", "optimize-css-assets-webpack-plugin": "^2.0.0", "ora": "^1.2.0", "phantomjs-prebuilt": "^2.1.14", "rimraf": "^2.6.0", "selenium-server": "^3.0.1", "semver": "^5.3.0", "shelljs": "^0.7.6", "sinon": "^2.1.0", "sinon-chai": "^2.8.0", "stylus": "^0.54.5", "stylus-loader": "^3.0.1", "url-loader": "^0.5.8", "vue-loader": "^12.1.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.3.3", "webpack": "^2.6.1", "webpack-bundle-analyzer": "^2.2.1", "webpack-dev-middleware": "^1.10.0", "webpack-hot-middleware": "^2.18.0", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 4.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }```
src/main.js
```
// const __THEME = 'mat' // === DEFAULT / CUSTOM STYLE === // WARNING! always comment out ONE of the two require() calls below. // 1. use next line to activate CUSTOM STYLE (./src/themes) // require(`./themes/app.${__THEME}.styl`) // 2. or, use next line to activate DEFAULT QUASAR STYLE // require(`quasar/dist/quasar.${__THEME}.css`) require(`quasar/dist/quasar.mat.css`) // ============================== // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import Quasar from 'quasar' import App from './App' import router from './router' Vue.config.productionTip = false Vue.use(Quasar) import 'quasar-extras/roboto-font' import 'quasar-extras/material-icons' // import 'quasar-extras/ionicons' // import 'quasar-extras/fontawesome' import 'quasar-extras/animate' Quasar.start(() => { /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } }) })```
test component,
```
<template> <q-layout ref="layout" view="lHh Lpr fff" > <q-toolbar slot="header" color="primary" > <q-toolbar-title class="row items-center"> <q-icon name="account balance" class="on-left" /> 运营活动快速搭建系统 <q-search inverted color="dark" placeholder="输入项目关键字" class="on-right" /> </q-toolbar-title> </q-toolbar> <q-btn icon="create">New item</q-btn> <q-list link separator > <q-list-header>已有项目列表</q-list-header> <q-item v-for="n in 3" :key="n"> <q-item-side icon="folder" inverted color="grey-6" /> <q-item-main> <q-item-tile label>抽奖项目 </q-item-tile> <q-item-tile sublabel>测试地址：test2-xxxxxx</q-item-tile> <q-item-tile sublabel>产线地址：q.yqb.-xxxxxx</q-item-tile> </q-item-main> <q-item-side right > <q-item-tile stamp >更新时间： {{updateDate}}</q-item-tile> </q-item-side> </q-item> </q-list> </q-layout> </template> <script> import { QLayout, QToolbar, QToolbarTitle, QIcon, QSearch, QList, QListHeader, QItem, QItemSeparator, QItemSide, QItemMain, QItemTile, date, QBtn, QField } from 'quasar' export default { name: 'index', components: { QLayout, QToolbar, QToolbarTitle, QIcon, QSearch, QList, QListHeader, QItem, QItemSeparator, QItemSide, QItemMain, QItemTile, QBtn, QField }, computed: { updateDate () { let timeStamp = new Date() let formattedString = date.formatDate(timeStamp, 'YYYY-MM-DD') return formattedString } } } </script>```
Allow third-party js to communicate to my vuejs app
I'm creating a vuejs app. And I want to add the ability for third-party non-vue js scripts to send commands or data to my app. For example
window.app = new Vue({}) app.setTitle = 'Hello'Of course I want to expose only certain methods and triggers.
HTML5 Client-side App Open File Dialog
Ok, so first, let me explain that I've researched this extensively and am completely aware of the security implications. This is a client-side app using JavaScript, Vue, and pure HTML5.
I use a hidden input type file to get the file dialog.
<input id="image-input" class="hidden" type="file" accept="image/*" @change="imageFileSelected"> <button type="button" title="Change Image" @click="openImage"><img src="icons/open-image.png"></button>You can ignore the fact that I'm using Vue because these are just the native onclick and onchange events. The problem applies to HTML5 in general. The button triggers the hidden file input just fine in Firefox, Edge, and Chrome. However, I noticed a problem with the later two, which is that the onchange event is not fired when you select the same file twice.
I've already seen the millions of other topics suggesting value = null. That solution works perfectly fine, except for one small trivial detail. Firefox will remember the last file that you uploaded and automatically select it, hence adding this fix for Chrome and Edge, breaks that desirable functionality that's present in Firefox. The reason I want the dialog to remember the last file is because of the nature of app itself. I expect that users may want to work on one of the files and then decide to start over by reloading the same file again.
openImage() { var el = document.getElementById('image-input'); el.value = null; el.click(); },Other apps that exhibit this same issue:
- http://blueimp.github.io/jQuery-File-Upload/
- https://rowanwins.github.io/vue-dropzone/dist/index.html
- https://fineuploader.com/demos.html
It seems nobody else is aware of this or else just doesn't care about whether their dialogs remember the last selected file. Regardless, does anyone know a way to fix this problem without breaking the Firefox functionality I find desirable?
Are you able to use vue.js inside an ejs file?
Sorry guys I am new to node.js and was wondering whether we are allowed to use vue.js within an ejs file.
How to refer laravel csrf field inside a vue template
I have a vue template that contains a form:
<form id="logout-form" :action="href" method="POST" style="display: none;"> {{ csrf_field() }} </form>In laravel, forms must have a csrf_field() defined. But within a vue component, the statement {{ csrf_field() }} means that I have a method named csrf_field in my vue instance and I am calling it.
How do I add csrf_field under this circumstance?
Share Vue variable across whole Laravel application
I am using a mixin to detect mobile users. Now I don't want to import this mixin into every single component where I need it, because this way I think it is probably running multiple times at the same time.
So I tried to do it like this (in app.js):
import DetectMobile from './mixins/DetectMobile.vue' const app = new Vue({ el: '#app', mixins: [ DetectMobile ], });But that doesn't work, when I try to access one of the variables from the mixin within a component, I get undefined.
Vue.js To add class active when click and remove the previous one
I want to achieve this active link on my div element here you can see the example that i want to do with my code
http://jsfiddle.net/fiddleyetu/9ff79/
$(function() { $( 'ul.nav li' ).on( 'click', function() { $( this ).parent().find( 'li.active' ).removeClass( 'active' ); $( this ).addClass( 'active' ); }); });in here using vue.js i can't do the active link on my div elements
here is my code for the elements on which i have to do the links active
<div class="conversion"> <div class="file has-text-centered icon-active-color" v-on:click="activeiconc"> <img src="../imgs/png.png"/> <h4>.PNG</h4> </div> <div class="file has-text-centered" v-on:click="activeicon" v-bind:class="{ 'icon-active-color':activeiconc,}"> <img src="../imgs/pdf.png"/> <h4>.PDF</h4> </div> <div class="file has-text-centered" v-on:click="activeicon" v-bind:class="{ 'icon-active-color':activeiconc }"> <img src="../imgs/jpg.png"/> <h4>.JPG</h4> </div> <div class="file has-text-centered" v-on:click="activeicon" v-bind:class="{ 'icon-active-color':activeiconc }"> <img src="../imgs/psd.png"/> <h4>.PSD</h4> </div> </div>js
export default { components: { MainLayout }, data: function(){ return { logo: false, color:false, list:true, grid:false, deletebtn:false, isImageModalActive: false, activerow: false, activeiconc:false, } }, methods:{ showgrid:function(){ this.grid = true; this.list = false; }, showlist:function(){ this.list ^=true; this.grid = false }, showLogo:function(){ this.logo ^= true; this.color = false; this.deletebtn ^= true; this.activerow ^= true }, showColor:function(){ this.color ^= true; this.logo = false; }, activeicon:function(){ this.activeiconc ^= true; } } }Vue js - Define prop as a specific type
I'm building a vuejs component which accepts a prop by the name of idFieldType
Now I want this prop to accept only a Number Type or a String Type
So I wrote it as follows
idFieldType: { Type: Function, default: function() { return Number; }, validator: function() { if(value == String || value == Number) { return true; } return false; } }I also tried replacing the type to Object.
My question is how can I write a prop that accepts only specific types ?
VueJs - DOM not updating on array mutation
I have a model in which I'm initializing an array on ajax success after the model is mounted
var self = this; $.getJSON("somejson.json", function (data) { var list = []; list = data.list.map(function (item) { return { id: item.id, text: item.text }; }); self.selectableItems = list; });I have a click method on each of these items which removes the item from selectableItems
select: function (item) { this.selectableItems.pop(item); },selectableItems renders correctly initially, but when I mutate the array, the dom isn't updating. Although the actual array is being modified correctly.
I verified this by having a computed property that returns the count of selectableItems. This count is updated correctly when the item is removed, but the dom still shows the item.
I also noticed that when I hard code the value of selectableItems in the ajax, everything works as expected!
self.selectableItems = [{ id: 1, text: "adsad"}];I'm aware of the caveats of array mutation in vue. But I feel I'm missing something basic here, as I have just started exploring Vue. Can someone point out on what I'm missing?
Dynamically append other component in Vue
I'm building a Chrome extension using Vue, and currently I'm trying to inject some HTML into a webpage. This is the App.vue file I've built so far:
<script> import $ from 'jquery'; import OtherComponent from './components/OtherComponent'; export default { name: 'app', components: { 'other-component': OtherComponent, }, mounted() { $('body').append('<div>{other-component}<div>'); }, }; </script>Obviously, the line $('body').append('<div>{other-component}<div>'); won't append other-component. I'm aware that other-component is generally used in the <template> of App.vue, but I need to do it from the JavaScript. Is there a way to make this work?
How to call function from router template?
I am doing very simple page with url's switching. In one of url I need to call @click methods. Here is my code:
const NotFound = { template: '<p>Page not found</p>' } const Home = { template: '<p>home page</p>' } const Faq = { template: '<p>Faq page</p>' } const Book = { template: ` <div> <button @click="foo()">test</button> </div> ` } const routes = [ {path: '/', component: Home}, {path: '/book', component: Book}, {path: '/faq', component: Faq} ] const router = new VueRouter({ routes // short for `routes: routes` }) new Vue({ el: '#app', router, data: { }, methods: { foo() { console.log("ffffff"); } } })But I am getting error: Property or method "foo" is not defined on the instance but referenced during render.
vue.js2 console err is "app.js:2 Uncaught SyntaxError: Unexpected identifier"
the result should be a paragraph contain a name and button to change this name from "adel" to "mohamed" but it is not working ,not showing any thing in the browser and i have console err is: "app.js:2 Uncaught SyntaxError: Unexpected identifier,
You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html "
//html code _______
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue.js course</title> <link rel="stylesheet" href="./styles.css"> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="vue-app-one"> <greeting></greeting> </div> <div id="vue-app-two"> <greeting></greeting> </div> <script src="./app.js"></script> </body> </html>// app.js code_________
Vue.component('greeting', { template: "<h1>hello {{ name }}. <button v-on:click="chang">change name</button></h1>", data(){ return { name:"adel" } }, methods: { chang: function(){ this.name = 'mohamed'; } } }); var one = new Vue({ el: '#vue-app-one' }); var two = new Vue({ el: '#vue-app-two' });Array Reactivity Issues
I'm having issues with array reactivity, please see this example: https://jsfiddle.net/jk1kadxq/
var app = new Vue({ el: "#app", data: function () { return { grid: { rows: [{}] } } }, methods: { addRow: function () { this.grid.rows.push({}); }, setRow: function (row) { console.log(row); this.$set(row, 'cell', 'Test'); } }, watch: { 'grid.rows': { deep: true, handler: function (rows, oldRows) { console.log('Rows updated', rows, oldRows); } } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> <div id="app"> <table> <tr v-for="row in grid.rows"> <td><input type="text" v-model="row.cell"></td> <td><button type="button" @click="setRow(row)">Set</button></td> </tr> </table> <button type="button" @click="addRow">Add</button> </div>
If a row has not been edited manually, clicking "Set" button sets the field to "Test" and all the further updates to it are catched in watcher.
If a row has been edited manually first, watcher is not triggered, and clicking "Set" button does not immediately update the field. Adding another row updates the current row.
Is there a different way to add new array members? This page says it's ok to just add: https://vuejs.org/v2/guide/list.html
VueJS Requested an insecure XMLHttpRequest endpoint
I have a VueJs app with a Laravel backend as the API.
When running locally the app works as expected with https, however when on the production server I get the Requested an insecure XMLHttpRequest endpoint message.
My server is on Digital Ocean, has been setup with RunCloud and has SSL enabled through LetsEncrypt.
The application can be viewed here: https://vehicletrader.sweney.co/#/
Any advice would help.
watching one value, computing the other one, how to update computed value when watched changes
I am watching one value and I computed another value.
Something like this:
computed: { modeText: function () { if(this.mode == 'create') return 'Create' else return 'Edit' } }, watch: { mode(val, old) { if(val == 'create') update modeText else update modeText }, },How do I recompute the computed value when watched value updates?
One prop is not displaying its data in VueJS
thanks for reading this. I have two props in my component. I dont know why props "labelbtn" is displaying data correctly but "connected2" is not.
Vue.component( 'button-labels', { props : ['connected2', 'labelbtn' ], template : `<div class="button-container"><button class="button-app" v-for="label in labelbtn" v-on:click="clickHandler(label)" >{{label.label}}</button><button>{{connected2}}</button></div> `, destroyed : function(){ console.log(mySPINBridge);},
methods : { clickHandler : function(label) { if (label.id === 1) { this.$emit('event_child', 'search-template') } }, }})
new Vue({ el: '#app', data : { labels : [ { id : 1, label : "Search" } , { id : 2, label: "Categories" }, { id : 3, label: "Favorites" }, {id : 4, label: "Settings"} ], results : [], connected1 : "hi there", currentView : "button-labels",},
this is from the main html file
<div id="app"> <component :is=currentView keep-alive :currView="currentView" :results='results' :labelbtn="labels" :connected2="connected1" v-on:event_child="eventChild"></component> </div>What does the CSS Selector > * do from within a Vue.js component?
While exploring the new Vuestic admin dashboard tool, I discovered a UI bug where the donut was oversized in relation to its containing element. I was trying to debug/fix it so I could submit a PR, but I ran into an odd CSS selector > * during debugging for the Vue Chart Base class which didn't quite make sense to me.
How I interpreted what > * would do in CSS: since > selector in CSS gets ALL children, and the * selector in CSS gets EVERY element on the page, I thought perhaps that using this selector means to get EVERY CHILD element.
When used in context of a Vue Component, I believe that CSS is scoped to that component, so is my interpretation correct, or am I mistaken?
How to run the official vue.js examples?
I git cloned vue, cd'ed into one of the examples folder and ran npm install. Everything went fine, then I ran npm run dev and it gets stuck at this stage. Is there anything else I should do to run this locally?
npm run dev > vue@2.4.2 dev /vue > rollup -w -c build/config.js --environment TARGET:web-full-dev bundling... bundled in 2456ms. Watching for changes...Is it possible to use online an $emitted parameter?
In the following code, clicking on the component emits a signal to the parent, who modifies its state online (in the sense - not via a handler):
Vue.component('my-component', { template: '<div v-on:click="emitit">click on the component</div>', methods: { emitit: function() { this.$emit('mysignal', 7) } } }) new Vue({ el: "#root", data: { from: 0 } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> <div id="root"> <my-component v-on:mysignal="from=5"></my-component> from component: {{ from }} </div>
Is it possible to access the parameter provided via the $emit directly in v-on:mysignal="..."?
I know that I can use a handler defined in the main Vue component but I would like to simplify my code and avoid to have several handlers in methods.