Software

I have created a vue plugin using multiple .vue component files. I would like to be able to host this project onto a cdn with plain javascript access, but am not sure how to write such a build script.

I am currently thinking of something like

require('vue-loader!./node_modules/vue-loader') var lib = require('src/<my_file>.vue')

in a build.js file I run with node. However, I am not sure how to use vue-loader outside of the context of webpack. I understand that this is not vue-loader's main focus, but I would think that somewhere in the library is a function to actually convert the .vue file into a json object I could print.

What internal function can I call, or otherwise what other option do I have for this?

I'm getting the following error when I move my mouse over a techanjs chart inside a vue.js component:

Uncaught TypeError: Cannot read property 'sourceEvent' of null at __webpack_exports__.a (eval at <anonymous> (renderer.js:2455), <anonymous>:6:26) at __webpack_exports__.a (eval at <anonymous> (renderer.js:9334), <anonymous>:7:99) at SVGRectElement.eval (eval at <anonymous> (renderer.js:8060), <anonymous>:2357:38) at SVGRectElement.eval (eval at <anonymous> (renderer.js:2037), <anonymous>:29:16) __webpack_exports__.a @ sourceEvent.js?354a:5 __webpack_exports__.a @ mouse.js?ab49:5 (anonymous) @ techan.js?5956:2357 (anonymous) @ on.js?519a:27 drag.js?c3c9:10 Uncaught TypeError: Cannot read property 'button' of null at SVGPathElement.defaultFilter (eval at <anonymous> (renderer.js:8340), <anonymous>:16:70) at SVGPathElement.mousedowned (eval at <anonymous> (renderer.js:8340), <anonymous>:47:32) at SVGPathElement.eval (eval at <anonymous> (renderer.js:2037), <anonymous>:29:16)

Does anyone know how to resolve this?

Here is the component:

<template> <div id="wrapper"> <main> <header> <NavBar /> </header> <section class="charts"> </section> </main> </div> </template> <script> import * as d3 from 'd3' // import {event as currentEvent} from 'd3-selection' import techan from 'techan' export default { name: 'charts', components: { }, mounted () { var dim = { width: 960, height: 500, margin: { top: 20, right: 50, bottom: 30, left: 50 }, ohlc: { height: 305 }, indicator: { height: 65, padding: 5 } } dim.plot = { width: dim.width - dim.margin.left - dim.margin.right, height: dim.height - dim.margin.top - dim.margin.bottom } dim.indicator.top = dim.ohlc.height + dim.indicator.padding dim.indicator.bottom = dim.indicator.top + dim.indicator.height + dim.indicator.padding var indicatorTop = d3.scaleLinear() .range([dim.indicator.top, dim.indicator.bottom]) var parseDate = d3.timeParse('%d-%b-%y') var zoom = d3.zoom() .on('zoom', zoomed) var x = techan.scale.financetime() .range([0, dim.plot.width]) var y = d3.scaleLinear() .range([dim.ohlc.height, 0]) var yPercent = y.copy() // Same as y at this stage, will get a different domain later var yInit, yPercentInit, zoomableInit var yVolume = d3.scaleLinear() .range([y(0), y(0.2)]) var candlestick = techan.plot.candlestick() .xScale(x) .yScale(y) var tradearrow = techan.plot.tradearrow() .xScale(x) .yScale(y) .y(function (d) { // Display the buy and sell arrows a bit above and below the price, so the price is still visible if (d.type === 'buy') return y(d.low) + 5 if (d.type === 'sell') return y(d.high) - 5 else return y(d.price) }) var sma0 = techan.plot.sma() .xScale(x) .yScale(y) var sma1 = techan.plot.sma() .xScale(x) .yScale(y) var ema2 = techan.plot.ema() .xScale(x) .yScale(y) var volume = techan.plot.volume() .accessor(candlestick.accessor()) // Set the accessor to a ohlc accessor so we get highlighted bars .xScale(x) .yScale(yVolume) var trendline = techan.plot.trendline() .xScale(x) .yScale(y) var supstance = techan.plot.supstance() .xScale(x) .yScale(y) var xAxis = d3.axisBottom(x) var timeAnnotation = techan.plot.axisannotation() .axis(xAxis) .orient('bottom') .format(d3.timeFormat('%Y-%m-%d')) .width(65) .translate([0, dim.plot.height]) var yAxis = d3.axisRight(y) var ohlcAnnotation = techan.plot.axisannotation() .axis(yAxis) .orient('right') .format(d3.format(',.2f')) .translate([x(1), 0]) var closeAnnotation = techan.plot.axisannotation() .axis(yAxis) .orient('right') .accessor(candlestick.accessor()) .format(d3.format(',.2f')) .translate([x(1), 0]) var percentAxis = d3.axisLeft(yPercent) .tickFormat(d3.format('+.1%')) var percentAnnotation = techan.plot.axisannotation() .axis(percentAxis) .orient('left') var volumeAxis = d3.axisRight(yVolume) .ticks(3) .tickFormat(d3.format(',.3s')) var volumeAnnotation = techan.plot.axisannotation() .axis(volumeAxis) .orient('right') .width(35) var macdScale = d3.scaleLinear() .range([indicatorTop(0) + dim.indicator.height, indicatorTop(0)]) var rsiScale = macdScale.copy() .range([indicatorTop(1) + dim.indicator.height, indicatorTop(1)]) var macd = techan.plot.macd() .xScale(x) .yScale(macdScale) var macdAxis = d3.axisRight(macdScale) .ticks(3) var macdAnnotation = techan.plot.axisannotation() .axis(macdAxis) .orient('right') .format(d3.format(',.2f')) .translate([x(1), 0]) var macdAxisLeft = d3.axisLeft(macdScale) .ticks(3) var macdAnnotationLeft = techan.plot.axisannotation() .axis(macdAxisLeft) .orient('left') .format(d3.format(',.2f')) var rsi = techan.plot.rsi() .xScale(x) .yScale(rsiScale) var rsiAxis = d3.axisRight(rsiScale) .ticks(3) var rsiAnnotation = techan.plot.axisannotation() .axis(rsiAxis) .orient('right') .format(d3.format(',.2f')) .translate([x(1), 0]) var rsiAxisLeft = d3.axisLeft(rsiScale) .ticks(3) var rsiAnnotationLeft = techan.plot.axisannotation() .axis(rsiAxisLeft) .orient('left') .format(d3.format(',.2f')) var ohlcCrosshair = techan.plot.crosshair() .xScale(timeAnnotation.axis().scale()) .yScale(ohlcAnnotation.axis().scale()) .xAnnotation(timeAnnotation) .yAnnotation([ohlcAnnotation, percentAnnotation, volumeAnnotation]) .verticalWireRange([0, dim.plot.height]) var macdCrosshair = techan.plot.crosshair() .xScale(timeAnnotation.axis().scale()) .yScale(macdAnnotation.axis().scale()) .xAnnotation(timeAnnotation) .yAnnotation([macdAnnotation, macdAnnotationLeft]) .verticalWireRange([0, dim.plot.height]) var rsiCrosshair = techan.plot.crosshair() .xScale(timeAnnotation.axis().scale()) .yScale(rsiAnnotation.axis().scale()) .xAnnotation(timeAnnotation) .yAnnotation([rsiAnnotation, rsiAnnotationLeft]) .verticalWireRange([0, dim.plot.height]) var svg = d3.select('body').append('svg') .attr('width', dim.width) .attr('height', dim.height) var defs = svg.append('defs') defs.append('clipPath') .attr('id', 'ohlcClip') .append('rect') .attr('x', 0) .attr('y', 0) .attr('width', dim.plot.width) .attr('height', dim.ohlc.height) defs.selectAll('indicatorClip').data([0, 1]) .enter() .append('clipPath') .attr('id', function (d, i) { return 'indicatorClip-' + i }) .append('rect') .attr('x', 0) .attr('y', function (d, i) { return indicatorTop(i) }) .attr('width', dim.plot.width) .attr('height', dim.indicator.height) svg = svg.append('g') .attr('transform', 'translate(' + dim.margin.left + ',' + dim.margin.top + ')') svg.append('text') .attr('class', 'symbol') .attr('x', 20) .text('Facebook, Inc. (FB)') svg.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0,' + dim.plot.height + ')') var ohlcSelection = svg.append('g') .attr('class', 'ohlc') .attr('transform', 'translate(0,0)') ohlcSelection.append('g') .attr('class', 'axis') .attr('transform', 'translate(' + x(1) + ',0)') .append('text') .attr('transform', 'rotate(-90)') .attr('y', -12) .attr('dy', '.71em') .style('text-anchor', 'end') .text('Price ($)') ohlcSelection.append('g') .attr('class', 'close annotation up') ohlcSelection.append('g') .attr('class', 'volume') .attr('clip-path', 'url(#ohlcClip)') ohlcSelection.append('g') .attr('class', 'candlestick') .attr('clip-path', 'url(#ohlcClip)') ohlcSelection.append('g') .attr('class', 'indicator sma ma-0') .attr('clip-path', 'url(#ohlcClip)') ohlcSelection.append('g') .attr('class', 'indicator sma ma-1') .attr('clip-path', 'url(#ohlcClip)') ohlcSelection.append('g') .attr('class', 'indicator ema ma-2') .attr('clip-path', 'url(#ohlcClip)') ohlcSelection.append('g') .attr('class', 'percent axis') ohlcSelection.append('g') .attr('class', 'volume axis') var indicatorSelection = svg.selectAll('svg > g.indicator').data(['macd', 'rsi']).enter() .append('g') .attr('class', function (d) { return d + ' indicator' }) indicatorSelection.append('g') .attr('class', 'axis right') .attr('transform', 'translate(' + x(1) + ',0)') indicatorSelection.append('g') .attr('class', 'axis left') .attr('transform', 'translate(' + x(0) + ',0)') indicatorSelection.append('g') .attr('class', 'indicator-plot') .attr('clip-path', function (d, i) { return 'url(#indicatorClip-' + i + ')' }) // Add trendlines and other interactions last to be above zoom pane svg.append('g') .attr('class', 'crosshair ohlc') svg.append('g') .attr('class', 'tradearrow') .attr('clip-path', 'url(#ohlcClip)') svg.append('g') .attr('class', 'crosshair macd') svg.append('g') .attr('class', 'crosshair rsi') svg.append('g') .attr('class', 'trendlines analysis') .attr('clip-path', 'url(#ohlcClip)') svg.append('g') .attr('class', 'supstances analysis') .attr('clip-path', 'url(#ohlcClip)') d3.select('button').on('click', reset) d3.csv('/static/data.csv', function (error, data) { if (error) return var accessor = candlestick.accessor() var indicatorPreRoll = 33 // Don't show where indicators don't have data data = data.map(function (d) { return { date: parseDate(d.Date), open: +d.Open, high: +d.High, low: +d.Low, close: +d.Close, volume: +d.Volume } }).sort(function (a, b) { return d3.ascending(accessor.d(a), accessor.d(b)) }) x.domain(techan.scale.plot.time(data).domain()) y.domain(techan.scale.plot.ohlc(data.slice(indicatorPreRoll)).domain()) yPercent.domain(techan.scale.plot.percent(y, accessor(data[indicatorPreRoll])).domain()) yVolume.domain(techan.scale.plot.volume(data).domain()) var trendlineData = [ { start: { date: new Date(2014, 2, 11), value: 72.50 }, end: { date: new Date(2014, 5, 9), value: 63.34 } }, { start: { date: new Date(2013, 10, 21), value: 43 }, end: { date: new Date(2014, 2, 17), value: 70.50 } } ] var supstanceData = [ { start: new Date(2014, 2, 11), end: new Date(2014, 5, 9), value: 63.64 }, { start: new Date(2013, 10, 21), end: new Date(2014, 2, 17), value: 55.50 } ] var trades = [ { date: data[67].date, type: 'buy', price: data[67].low, low: data[67].low, high: data[67].high }, { date: data[100].date, type: 'sell', price: data[100].high, low: data[100].low, high: data[100].high }, { date: data[130].date, type: 'buy', price: data[130].low, low: data[130].low, high: data[130].high }, { date: data[170].date, type: 'sell', price: data[170].low, low: data[170].low, high: data[170].high } ] var macdData = techan.indicator.macd()(data) macdScale.domain(techan.scale.plot.macd(macdData).domain()) var rsiData = techan.indicator.rsi()(data) rsiScale.domain(techan.scale.plot.rsi(rsiData).domain()) svg.select('g.candlestick').datum(data).call(candlestick) svg.select('g.close.annotation').datum([data[data.length - 1]]).call(closeAnnotation) svg.select('g.volume').datum(data).call(volume) svg.select('g.sma.ma-0').datum(techan.indicator.sma().period(10)(data)).call(sma0) svg.select('g.sma.ma-1').datum(techan.indicator.sma().period(20)(data)).call(sma1) svg.select('g.ema.ma-2').datum(techan.indicator.ema().period(50)(data)).call(ema2) svg.select('g.macd .indicator-plot').datum(macdData).call(macd) svg.select('g.rsi .indicator-plot').datum(rsiData).call(rsi) svg.select('g.crosshair.ohlc').call(ohlcCrosshair).call(zoom) svg.select('g.crosshair.macd').call(macdCrosshair).call(zoom) svg.select('g.crosshair.rsi').call(rsiCrosshair).call(zoom) svg.select('g.trendlines').datum(trendlineData).call(trendline).call(trendline.drag) svg.select('g.supstances').datum(supstanceData).call(supstance).call(supstance.drag) svg.select('g.tradearrow').datum(trades).call(tradearrow) // Stash for zooming zoomableInit = x.zoomable().domain([indicatorPreRoll, data.length]).copy() // Zoom in a little to hide indicator preroll yInit = y.copy() yPercentInit = yPercent.copy() draw() }) function reset () { zoom.scale(1) zoom.translate([0, 0]) draw() } function zoomed () { x.zoomable().domain(d3.event.transform.rescaleX(zoomableInit).domain()) y.domain(d3.event.transform.rescaleY(yInit).domain()) yPercent.domain(d3.event.transform.rescaleY(yPercentInit).domain()) draw() } function draw () { svg.select('g.x.axis').call(xAxis) svg.select('g.ohlc .axis').call(yAxis) svg.select('g.volume.axis').call(volumeAxis) svg.select('g.percent.axis').call(percentAxis) svg.select('g.macd .axis.right').call(macdAxis) svg.select('g.rsi .axis.right').call(rsiAxis) svg.select('g.macd .axis.left').call(macdAxisLeft) svg.select('g.rsi .axis.left').call(rsiAxisLeft) // We know the data does not change, a simple refresh that does not perform data joins will suffice. svg.select('g.candlestick').call(candlestick.refresh) svg.select('g.close.annotation').call(closeAnnotation.refresh) svg.select('g.volume').call(volume.refresh) svg.select('g .sma.ma-0').call(sma0.refresh) svg.select('g .sma.ma-1').call(sma1.refresh) svg.select('g .ema.ma-2').call(ema2.refresh) svg.select('g.macd .indicator-plot').call(macd.refresh) svg.select('g.rsi .indicator-plot').call(rsi.refresh) svg.select('g.crosshair.ohlc').call(ohlcCrosshair.refresh) svg.select('g.crosshair.macd').call(macdCrosshair.refresh) svg.select('g.crosshair.rsi').call(rsiCrosshair.refresh) svg.select('g.trendlines').call(trendline.refresh) svg.select('g.supstances').call(supstance.refresh) svg.select('g.tradearrow').call(tradearrow.refresh) } } } </script> <style> text { fill: #000; } text.symbol { fill: #BBBBBB; } path { fill: none; stroke-width: 1; } path.candle { stroke: #000000; } path.candle.body { stroke-width: 0; } path.candle.up { fill: #00AA00; stroke: #00AA00; } path.candle.down { fill: #FF0000; stroke: #FF0000; } .close.annotation.up path { fill: #00AA00; } path.volume { fill: #DDDDDD; } .indicator-plot path.line { fill: none; stroke-width: 1; } .ma-0 path.line { stroke: #1f77b4; } .ma-1 path.line { stroke: #aec7e8; } .ma-2 path.line { stroke: #ff7f0e; } button { position: absolute; right: 110px; top: 25px; } path.macd { stroke: #0000AA; } path.signal { stroke: #FF9999; } path.zero { stroke: #BBBBBB; stroke-dasharray: 0; stroke-opacity: 0.5; } path.difference { fill: #BBBBBB; opacity: 0.5; } path.rsi { stroke: #000000; } path.overbought, path.oversold { stroke: #FF9999; stroke-dasharray: 5, 5; } path.middle, path.zero { stroke: #BBBBBB; stroke-dasharray: 5, 5; } .analysis path, .analysis circle { stroke: blue; stroke-width: 0.8; } .trendline circle { stroke-width: 0; display: none; } .mouseover .trendline path { stroke-width: 1.2; } .mouseover .trendline circle { stroke-width: 1; display: inline; } .dragging .trendline path, .dragging .trendline circle { stroke: darkblue; } .interaction path, .interaction circle { pointer-events: all; } .interaction .body { cursor: move; } .trendlines .interaction .start, .trendlines .interaction .end { cursor: nwse-resize; } .supstance path { stroke-dasharray: 2, 2; } .supstances .interaction path { pointer-events: all; cursor: ns-resize; } .mouseover .supstance path { stroke-width: 1.5; } .dragging .supstance path { stroke: darkblue; } .crosshair { cursor: crosshair; } .crosshair path.wire { stroke: #DDDDDD; stroke-dasharray: 1, 1; } .crosshair .axisannotation path { fill: #DDDDDD; } .tradearrow path.tradearrow { stroke: none; } .tradearrow path.buy { fill: #0000FF; } .tradearrow path.sell { fill: #9900FF; } .tradearrow path.highlight { fill: none; stroke-width: 2; } .tradearrow path.highlight.buy { stroke: #0000FF; } .tradearrow path.highlight.sell { stroke: #9900FF; } </style>

I'm trying to implement Veutify's text field

This is what it looks like for me right now:

And this is what it looks like when the text field is in focus:

These are my imports in main.js

import Vue from 'vue'; import Vuetify from 'vuetify'; Vue.use(Vuetify);

Am I missing an import or something?

I currently have an object similar to the following in a Vue.js app that I'm trying to port over to TypeScript. Note this object's structure is dictated by the Vuex library:

const getters = { allUsers(state) { return state.users; }, firstUser(_state, getters) { return getters.allUsers()[0] } }

How can I provide the appropriate type for getters here in firstUser?

const getters = { allUsers(state: State) { return state.users; }, firstUser(_state: State, getters: typeof getters) { return getters.allUsers()[0] } }

Currently I get the following error:

[ts] 'getters' is referenced directly or indirectly in its own type annotation.

My app has an array in the vuex store. I am iterating over it with v-for to build a table. When I add or delete an item, I use push or splice on the array in the vuex store. An item appears or disappears from the table, but sometimes one of the items has values of one of the other items instead of the correct values. When I inspect the vuex store with the chrome dev tools, it always has the right values. When I navigate away and back, the table then has the right values. Is there something I’m missing? I found this when I was googling: https://vuejs.org/v2/guide/list.html#Array-Change-Detection, but it’s not really clear what I’m supposed to do with that info.

Today, we are announcing the Mozilla Information Trust Initiative (MITI)—a comprehensive effort to keep the Internet credible and healthy. Mozilla is developing products, research, and communities to battle information pollution and so-called ‘fake news’ online. And we’re seeking partners and allies to help us do so.

Here’s why.

Imagine this: Two news articles are shared simultaneously online.

The first is a deeply reported and thoroughly fact checked story from a credible news-gathering organization. Perhaps Le Monde, the Wall Street Journal, or Süddeutsche Zeitung.

The second is a false or misleading story. But the article is designed to mimic content from a credible newsroom, from its headline to its dissemination.

How do the two articles fare?

The first article—designed to inform—receives limited attention. The second article—designed for virality—accumulates shares. It exploits cognitive bias, belief echos, and algorithmic filter bubbles. It percolates across the Internet, spreading misinformation.

This isn’t a hypothetical scenario—it’s happening now in the U.S., in the U.K., in France, in Germany, and beyond. The Pope did not endorse a U.S. presidential candidate, nor does India’s 2000-rupee note contain a tracking device. But fabricated content, misleading headlines, and false context convinced millions of Internet users otherwise.

The impact of misinformation on our society is one of the most divisive, fraught, and important topics of our day. Misinformation depletes transparency and sows discord, erodes participation and trust, and saps the web’s public benefit. In short: it makes the Internet less healthy. As a result, the Internet’s ability to power democratic society suffers greatly.

This is why we’re launching MITI. We’re investing in people, programs, and projects that disrupt misinformation online.

Why Mozilla? The spread of misinformation violates nearly every tenet of the Mozilla Manifesto, our guiding doctrine. Mozilla has a long history of putting community and principles first, and devoting resources to urgent issues—our Firefox browser is just one example. Mozilla is committed to building tolerance rather than hate, and building technology that can protect individuals and the web.

So we’re drawing on the unique depth and breadth of the Mozilla Network—from journalists and technologists to policymakers and scientists—to build functional products, research, and community-based solutions.

Misinformation is a complex problem with roots in technology, cognitive science, economics, and literacy. And so the Mozilla Information Trust Initiative will focus on four areas:

Product

Mozilla’s Open Innovation team will work with like-minded technologists and artists to develop technology that combats misinformation.

Mozilla will partner with global media organizations to do this, and also double down on our existing product work in the space, like Pocket, Focus, and Coral. Coral is a Mozilla project that builds open-source tools to make digital journalism more inclusive and more engaging.

Literacy

We can’t solve misinformation with technology alone—we also need to educate and empower Internet users, as well as those leading innovative literacy initiatives.

Mozilla will develop a web literacy curriculum that addresses misinformation, and will continue investing in existing projects like the Mission: Information teaching kit.

Research

Misinformation in the digital age is a relatively new phenomenon. To solve such a thorny problem, we first need to fully understand it.

Later this year, Mozilla will be releasing original research on how misinformation impacts users’ experiences online. We will be drawing on a dataset of user-level browsing data gathered during the 2016 U.S. elections.

Creative interventions

Mozilla will field and fund pitches from technologists who are combatting misinformation using various mediums, including virtual reality and augmented reality. It’s an opportunity to apply emerging technology to one of today’s most pressing issues.

Imagine: an augmented reality web app that uses data visualization to investigate misinformation’s impact on Internet health. Or, a virtual reality experience that takes users through the history of misinformation online.

Mozilla will also support key events in this space, like Media Party Argentina, the Computation+Journalism Symposium, the Online News Association, the 22×20 summit, and a MisinfoCon in London as part of MozFest. (To learn more about MozFest — Mozilla’s annual, flagship event devoted to Internet health — visit mozillafestival.org.)

We’re hoping to hear from and work with partners who share our vision. Please reach out to Phillip Smith, Mozilla’s Senior Fellow on Media, Misinformation & Trust, at miti@mozilla.com to get involved.

More than ever, we need a network of people and organizations devoted to understanding, and combatting, misinformation online. The health of the Internet — and our societies — depends on it.

The post The Mozilla Information Trust Initiative: Building a movement to fight misinformation online appeared first on The Mozilla Blog.

I use axios to make post request

import axios from 'axios' params = {'HTTP_CONTENT_LANGUAGE': self.language} headers = {'header1': value} axios.post(url, params, headers)

is it coorect?

or axios.post(url, params: params, headers: headers) is correct?

The issue I currently run into is that I have a form component that displays both the login form and the register form. It is as follows:

<template> ... <login-form v-show="isVisible.login" v-on:submit.prevent="handleLoginFormSubmit()"></login-form> <register-form v-show="! isVisible.login" v-on:submit.prevent="handleRegisterFormSubmit()"></register-form> ... </template> <script> import LoginForm from './LoginForm.vue'; import RegisterForm from './RegisterForm.vue'; export default { data() { return { isVisible: { login: true } } }, components: { 'login-form': LoginForm, 'register-form': RegisterForm, }, methods: { handleLoginFormSubmit() { }, handleRegisterFormSubmit() { } } } </script> <style> </style>

The error I receive looks like this:

[Vue warn]: Property or method "isVisible" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

found in

---> <LoginForm> at /Users/chrisbreuer/code/ordering/resources/assets/app/js/components/LoginForm.vue [Vue warn]: Error in render function: "TypeError: Cannot read property 'login' of undefined" found in ---> <LoginForm> at /Users/chrisbreuer/code/ordering/resources/assets/app/js/components/LoginForm.vue

How do I correctly register a component within a component?

I created a root node and two components, on root node i have a text field to search, which is sended dinamicaly to each component to search in an array and that they are rendered, additionally a each component is send a reference function for indicate if array is empty. But, when i enter text in input field of console show this message:

[Vue warn]: You may have an infinite update loop in a component render function.

found in

--->

My code:

var links =[...]; var links2 =[...]; var template = ` <section class="section has-text-centered" v-if="searchBy.length > 0"> <section class="container"> <p class="subtitle has-text-dark">{{subtitle}}</p> <section class="columns is-multiline "> <section class="column column-fixed" v-for="link in searchBy"> <a v-bind:href="link.url" onclick="window.open(this.href); return false;"> <strong> {{link.title}} </strong> <figure class="image is-96x96"> <img class="" v-bind:src="link.img"> </figure> </a> </section> </section> <hr> </section> </section> ` Vue.component('links',{ props:['links','subtitle', 'search'], template:template, computed:{ searchBy:function(){ if(this.search !==''){ var _links = this.links.filter((link)=>{ return link.title.toLowerCase().search(this.search.toLowerCase()) == 0 }) console.log('_links: ', _links); (_links.length > 0)? this.$emit('empty',false):this.$emit('empty',true); return _links; } return this.links; } } }) new Vue({ el:"#links", data:{ brand:"Enlaces", title:"Acceso Rápido", subtitle_private:"Guardián del ALBA - PDVSA", subtitle_public:"Públicos", links:links, links2:links2, search:'', thereAreLinks:0 }, methods:{ linksEmpty(status){ console.log('hay resultados: ', status); (status)?this.thereAreLinks++:this.thereAreLinks--; } } })

html container:

<div class="container"> <links :links="links" :subtitle="subtitle_private" :search="search" @empty="linksEmpty"></links> <links :links="links2" :subtitle="subtitle_public" :search="search" @empty="linksEmpty"></links> <h2 class="title has-text-centered" v-if="thereAreLinks > 1"> No results: <span class="has-text-danger">{{search}}!</span> </h2> </div>

Some idea?

I am using VueJS and the $http package to do API calls to my website. However, it seems that on Google Chrome 60.0.3112.90, the data property of the Response object no longer parses the received JSON and instead passes back a string.

Is this a bug in Google Chrome? The site was working fine yesterday and with no changes, no ajax call works today. I can only assume its the new version of Chrome as the latest FireFox works just fine.

Anyone else experienced this?

While following the vue-stripe installation directions, which mainly consists of a simple import { StripeCheckout } from 'vue-stripe' I received the following warning from Webpack:

"export 'StripeCheckout' was not found in 'vue-stripe'

(Technically I am using laravel-mix as a wrapper around Webpack.)

I have no clue why it isn't working. Everything on my system is reasonably up-to-date. It's a Laravel 5.4 app on the back-end with a SPA on the front-end using Vue 2 and vue-router, and it uses yarn instead of npm, with a lot of Vue components.

I've some component in VueJs that looks like this:

export default { name: 'RecruitForm', data() { return { form: { child: {}, mother: {}, father: {} }, isSubmiting: false, isValid: true } }, methods: { submit: () => { this.isSubmiting = true; this.isValid = true; let validateObject = (obj) => { var keys = Object.keys(obj); if(keys.length === 0){ return false; } for (var key in keys) { if (!this.form[key]) isValid = false; } } validateObject(this.form.child); validateObject(this.form.mother); validateObject(this.form.father); } } }

When the validateObject method is fired and I'm trying to access nested properties of form object I get can not read property 'child' of undefined error. While debbuging in console I can see that the form is not regular object but {__ob__: Observer}

I have a Vue component registered with:

Vue.component('logo', function (resolve) {require(['./components/layout/Logo.vue'], resolve)});

The component itself is defined as:

<template> <div> <div class="title"> <a href="/"> <h1>Welcome to my Site!</h1> </a> </div> <navigation></navigation> </div> </template> <style scoped> h1 { text-decoration: underline; text-align: center; color: #000000; } </style> <script> import Navigation from './Navigation.vue'; export default { data() { return { msg:'hello vue' } }, components: { Navigation } } </script>

Logo.vue and Navigation.vue are in the same directory. Webpack does not complain when running.

When the site loads though there is a console error reported:

app.js:142 TypeError: Cannot read property 'call' of undefined at __webpack_require__ (app.js:50) at app.js:883 at <anonymous> __webpack_require__.oe @ app.js:142 Promise rejected (async) (anonymous) @ app.js:883 resolveAsyncComponent @ app.js:33890 createComponent @ app.js:35368 _createElement @ app.js:35578 createElement @ app.js:35517 vm._c @ app.js:35857 (anonymous) @ VM449:2 Vue._render @ app.js:35909 updateComponent @ app.js:34319 get @ app.js:34662 Watcher @ app.js:34651 mountComponent @ app.js:34323 Vue$3.$mount @ app.js:39644 Vue$3.$mount @ app.js:41847 Vue._init @ app.js:36017 Vue$3 @ app.js:36102 (anonymous) @ app.js:886 __webpack_require__ @ app.js:50 (anonymous) @ app.js:857 __webpack_require__ @ app.js:50 (anonymous) @ app.js:145 (anonymous) @ app.js:148 app.js:50 Uncaught (in promise) TypeError: Cannot read property 'call' of undefined at __webpack_require__ (app.js:50) at app.js:883 at <anonymous>

I am quite new to Vue and am making a project that can be used on both Desktop and Mobile.

I am using vue-router to manage the routing in my project and I have nested views for some pages.

For example:

• I have a settings page

• This page has a navigation role and 2 sub-routes (like account or preferences)

• So I have 3 components, one Settings (do the nav and have a router-view). And one for each nested route.

Here in my router configuration

{ path: '/settings', name: 'settings', component: Settings, children: [ { path: 'account', name: 'settings-account', component: Account }, { path: 'preferences', name: 'settings-preferences', component: Preferences } ] }

Here in Settings.vue

<template> <nav> <!-- some router-link s --> </nav> <router-view></router-view> </template>

My question is: When the user is on desktop, the router-view and the nav are on the same screen, which is fine.

But when the user is on a mobile, I would like to load another full page like /settings/account instead of having everything on the same.

Like a classic master-detail flow.

How can I implement this ? Should I declare another component and another route like

{ path: '/settings/account', name: 'settings-account-mobile', component: SettingsAccount }

Or is there a better way to do that ?

Thanks for any advice

[my-project-directory] is the full path of my project.

I started off with the webpack project via "vue init webpack my-project", as per the official Vue.js documentation.

I am attempting to switch to TypeScript by adding vuetype.

I've added a resources.d.ts file to the root of my src directory, though I'm unsure how it's being referenced:

declare module "*.vue" { import Vue from 'vue' export default Vue }

I've switched the entry to ts in webpack.base.conf.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.ts' }, output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { extensions: ['.js', '.ts', '.vue', '.json'], alias: { '@': resolve('src') } }, module: { rules: [ { 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]') } } ] } }

This is my main.ts file. Note that if I change the import to './App' (without the .vue, it gives me "(2,17): error TS2307: Cannot find module './App'.":

import Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: h => h(App) })

In App.vue I've added the lang="ts", used Component from the vuetype libraries:

<template> <div>TEST</div> </template> <script lang="ts"> import Vue from 'vue' import { Component } from 'vue-property-decorator' @Component export default class App extends Vue { name: 'app' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

The App.vue.d.ts output:

import Vue from 'vue'; export default class App extends Vue { name: 'app'; components: { Hello; Game; }; }

My package.json:

{ "name": "dominant-species", "version": "1.0.0", "description": "A Game", "author": "Frank Rizzi", "private": true, "scripts": { "dev": "node build/dev-server.js", "start": "node build/dev-server.js", "build": "node build/build.js" }, "dependencies": { "@types/core-js": "^0.9.42", "core-js": "^2.5.0", "ts-loader": "^2.3.2", "vue": "^2.4.2" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-loader": "^7.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", "chalk": "^2.0.1", "connect-history-api-fallback": "^1.3.0", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.0", "cssnano": "^3.10.0", "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", "opn": "^5.1.0", "optimize-css-assets-webpack-plugin": "^2.0.0", "ora": "^1.2.0", "rimraf": "^2.6.0", "semver": "^5.3.0", "shelljs": "^0.7.6", "url-loader": "^0.5.8", "vue-class-component": "^5.0.2", "vue-loader": "^12.1.0", "vue-property-decorator": "^5.2.1", "vue-style-loader": "^3.0.1", "vue-template-compiler": "2.4.2", "webpack": "^2.6.1", "webpack-bundle-analyzer": "^2.9.0", "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" ] }

My tsconfig.json:

{ "compilerOptions": { // ... other options omitted "experimentalDecorators": true, "allowSyntheticDefaultImports": true, "lib": [ "es6", "es2015.promise", "es2015.iterable", "dom","dom.iterable","es2015" ], "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "target": "es6", "noImplicitAny": false }, "exclude": [ "node_modules" ] }

And here is the full error:

Module build failed: Error: Could not find file: '[MyDirectory]\src\App.vue'. error in ./src/App.vue Module build failed: Error: Could not find file: '[my-project-directory]\ src\App.vue'. at getValidSourceFile ([my-user-directory]\npm\node_modules \typescript\lib\typescript.js:89078:23) at Object.getEmitOutput ([my-user-directory]\npm\node_modul es\typescript\lib\typescript.js:89448:30) at getEmit ([my-project-directory]\node_modules\ts-loader\dist\index. js:114:43) at successLoader ([my-project-directory]\node_modules\ts-loader\dist\ index.js:34:11) at Object.loader ([my-project-directory]\node_modules\ts-loader\dist\ index.js:21:12) @ ./src/App.vue 8:2-94 @ ./src/main.ts @ multi ./build/dev-client ./src/main.ts

Versions:

node -v v6.11.2 npm -v 3.10.10 tsc -v Version 2.4.2

I want to add a background image that covers the whole page. However this is how it looks now :

I want it to span the whole web page. How would this be done in vue.js?

I also want an animated toolbar so that when the page is not scrolling the toolbar is transparent and takes the look of the background image. When it scrolls the toolbar will have the current blue color

Here is my fiddle

vue.js project

THIS is the HTML

<template> <div id = "background"> <div class = "" id = "explain"> <h1 class = "md-title">{{ message }}</h1> <h3> Collect, analyse and do better with data!</h3> </div> <hr> <md-layout id = "container"> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"> <span class="md-headline">HOW does levi function ?</span> </md-layout> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"> <h3>levi uses research and experimentation to provide 'actionable knowledge' that you can use to <b>do well </b>in your environment. </h3> </md-layout> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large = "33" md-flex-xlarge = "33"> <h4> Identify and Collect what is needed</h4> </md-layout> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large = "33" md-flex-xlarge = "33"> <h4> Organize and analyse the evidence</h4> </md-layout> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large = "33" md-flex-xlarge = "33"> <h4>Communicate and act on the evidence! </h4> </md-layout> </md-layout> <md-layout id = "Identity"> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"> <span class="md-headline"> HOW do we exist?</span> </md-layout> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"> Our team realized that many institutions are unable to deconstruct their environment and respond to its need because; they do not have the cost effective products, proper processes , and the necessary execution techniques required to do so. <p>levi has been built to provide the platform and process necessary to help those in need <b>do well.</b></p> </md-layout> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"> <span class="md-headline">WHAT do we do?</span> </md-layout> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"> Our community combines products and processes to augment human intelligence, reduce waste, and provide wellbeing. </md-layout> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"> <span class="md-headline"></span> </md-layout> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"> </md-layout> </md-layout> </div> </template>

THIS is the CSS

<style scoped> h1 { font-family: Helvetica neue; text-align: center; font-weight: 400; font-size: 49px; line-height: 1.1em; font-family: Heiti SC; } h2 { font-family: Helvetica neue; text-align: center; font-weight: 600; font-size: 19px; } h3 { font-family: Helvetica neue; text-align: center; font-weight: 300; font-size: 19px; } h4 { font-family: Helvetica neue; text-align: center; font-weight: 300; font-size: 19px; } #Identity > .md-layout { /*background-color: lightgrey;*/ border-color: black; align-items: center; justify-content: center; /*border-style: dotted;*/ border-width: 1px; padding: 8px; font-weight: 200; font-size: 20px; line-height: 1.4em; } span { font-family: Helvetica neue; }

THIS is the css syntax for rendering the background.

#background { background: url(../../assets/whiteCoffeedarken.jpg); } #container > .md-layout { /*background-color: lightgrey;*/ border-color: black; align-items: center; justify-content: center; /*border-style: dotted;*/ border-width: 1px; padding: 8px; } </style>

I am working on a VueJS project. I have defined many components. Some times components are used inside another component. For example if I have OuterComponent.Vue + OuterComponent.js which has another InnerComponent.Vue + InnerComponent.js. How do I access the InnerComponent.js methods from OuterComponent.Vue + OuterComponent.js. How does webpack translates the objects names?

How do I access the setOptions in a vue template? I can't do HighCharts.setOptions({}); as the HighCharts object is not availaible - Im using VueHighCharts (https://github.com/superman66/vue-highcharts/) - Any examples would be appreciated:

I am trying to integrate the below graph(dagre-d3) to my vuejs application.

http://www.samsarin.com/project/dagre-d3/latest/demo/hover.html

I have successfully able to generate the graph inside the vuejs component. But i am not able to achieve the tooltip functionality which is provided in the graph. They are using a library called tipsy, when i run the graph in a plain html it works fine. But when i use inside the vue application its throwing the below error.

[Vue warn]: Error in mounted hook: "TypeError: $(...).tipsy is not a function" found in ---> <DagView> at

If i commented the below part graph is generating without any issue but tooltip is not showing.

inner.selectAll("g.node") .attr("title", function(v) { return styleTooltip(v, "Execution Time: "+g.node(v).label + " <br /> Description: "+g.node(v).label) }) .each(function(v) { **$(this).tipsy**({ gravity: "w", opacity: 1, html: true }) })

I'm working with the latest versions of vue-router, vuex and feathers-vuex and I have a problem with my router.

What I'm doing is to check if a route has the property "requiresAuth": true in the meta.json file. If it does then check the value of store.state.auth.user provided by feathers-vuex, if this value is not set then redirect to login.

This works fine except when I'm logged in and if I reload my protected page called /private then it gets redirected to login so it seems that the value of store.state.auth.user is not ready inside router.beforeEach.

So how can I set up my router in order to get the value of the store at the right moment?

My files are as follow:

index.js

import Vue from 'vue' import Router from 'vue-router' import store from '../store' const meta = require('./meta.json') // Route helper function for lazy loading function route (path, view) { return { path: path, meta: meta[path], component: () => import(`../components/${view}`) } } Vue.use(Router) export function createRouter () { const router = new Router({ mode: 'history', scrollBehavior: () => ({ y: 0 }), routes: [ route('/login', 'Login') route('/private', 'Private'), { path: '*', redirect: '/' } ] }) router.beforeEach((to, from, next) => { if (to.meta.requiresAuth) { if (!store.state.auth.user) { next('/login') } else { next() } } else { next() } }) return router }

meta.json

{ "/private": { "requiresAuth": true } }