Software

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 } }

I am trying to make a basic GET call to an API using JSON API specifications with deeply nested relationship data. I'm experiencing an issue with axios or vue manipulating my data...

Paying attention to pickup and delivery relationships, the raw data looks like the following:

{ "data": { "type": "parent", "id": "34", "attributes": { // ... }, "relationships": { "r1": { "data": [ { "type": "nextparent", "id": "62", "attributes": { // .. }, "relationships": { "pickup": { "data": [ { "type": "package", "id": 521, "attributes": { // ... } }, // ... ] }, "delivery": { "data": [] } } }, // ... ] } } } }

... where pickup has an array of objects and delivery has an empty array. However, when I try to retrieve the response in the callback, delivery is an exact copy of pickup.

var promise = window.axios({ url: window.baseApi + '/my-object/34', method: 'get' }) promise.then(function (response) { console.log(response) })

Additionally, I checked the response from the axios transformResponse function and the raw json was correct. This is only happening in the callback.

Whenever you run console.log(response) in the callback, Vue's observers are applied to the response object, which makes me wonder if this is a Vue issue considering that only the relationships of the first r1 object experience this.

Will update with fiddle, as soon as I can.

i am using the dragable and sortable with vuejs, and i have a issue, everytime i change the position of two divs for example, they change but the json array doesn't update.

I am working with vuex, and i have in my component template this html:

<draggable v-model="myList"> <div class="panel panel-primary" v-for="(value, key, index) in this.$store.getters.getDocumentAttributes"> <div class="panel-body quote"> <span @click="removeSection(index,key)" class="pull-right glyphicon glyphicon-remove text-info"></span> <p>{{value.key}}</p> </div> </div> </draggable>

then i got my computed prop that gets and sets the data that come from vuex,

computed: { sections() { return this.$store.getters.getDocument; }, myList: { get() { return this.$store.getters.getDocument.getDocumentAttributes; }, set(value) { this.$store.commit('updateList', value) } } },

the updateList should update my list(if i am thinking well) so i have this:

}, mutations: { updateList: (state,list) => { state.Doc.atributes = list; } }, document: { "id": "0", "atributes": [] },

i try to replace the old array with the new matching with the atributes array, any help with this?

ps: the document is inside the data, i just tried to place the necessary code.

Thanks

I created a project using the vue cli generator, and I want to write tests for it using jest.

I followed This Hackernoon Tutorial and it took me 90% of the way. I have one last bug which I would like to solve:

I am using Bootstrap Vue in my application, and when I wrote my tests with mocha, all I had to do for the components in this lib to be available during tests is to add Vue.use(BootstrapVue); in the index.js file in <project folder>/test/unit/index.js

jest seems to ignore this, and throws:

console.error node_modules/vue/dist/vue.common.js:481 [Vue warn]: Unknown custom element: <b-jumbotron> - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in <Root>)

I am also using other components in a similar way, and they all throw similar errors.

How can I solve this?

(if any additional information/code is needed, please write in the comments, and I'll edit this question)

I am new to Vue.js, trying to understand computed values. In particular, I am returning json data from my REST API, and in that data is a field called date that is in unixtime (ie 1486231256). I want to transform that field to human readable, but the app is returning invalid date. Here is my code:

<script> import axios from 'axios' import moment from 'moment' export default { data: () => ({ errors: [], posts: [] }), // Fetches posts when the component is created. created () { axios.get('https://example.com/api/v1/?uid=1', { }) .then(response => { this.posts = response.data }) .catch(e => { this.errors.push(e) }) }, computed: { unixform () { return moment(this.posts.date, 'X').format('YYYY-MM-DD') } } } </script>

I don't think moment is the problem here, because if I change the function's return to simply this.posts.date or this.date, I get an error of undefined. So somehow, I am not accessing that property, and I can't figure out why.

Perhaps you’re starting to see a pattern – we’re working furiously to make Firefox faster and better than ever. And today we’re shipping a new release that’s our best yet, one that introduces exciting, empowering new technologies for creators as well as improves the everyday experience for all Firefox users.

Here’s what’s new today:

WebVR opens up a whole new world for the WWW

On top of Firefox’s new super-fast multi-process foundation, today we’re launching a breakthrough feature that expands the web to an entirely new experience. Firefox for Windows is the first desktop browser to support WebVR for all users, letting you experience next-generation entertainment in virtual reality.

WebVR enables developers and artists to create web-based VR experiences you can browse to with Firefox. So whether you’re a current Oculus Rift or HTC Vive owner – or still deciding when you’re going to take the VR leap – Firefox can get you to your VR fix faster. Once you find a web game or app that supports VR, you can experience it with your headset just by clicking the VR goggles icon visible on the web page. You can navigate and control VR experiences with handset controllers and your movements in physical space.

For a look at what WebVR can do, check out this sizzle reel (retro intro intended!).

If you’re ready to try out VR with Firefox, a growing community of creators has already been building content with WebVR. Visit vr.mozilla.org to find some experiences we recommend, many made with A-Frame, an easy-to-use WebVR content creation framework made by Mozilla.. One of our favorites is A Painter, a VR painting experience. None of this would have been possible without the hard work of the Mozilla VR team, who collaborated with industry partners, fellow browser makers and the developer community to create and adopt the WebVR specification. If you’d like to learn more about the history and capabilities of WebVR, check out this Medium post by Sean White.

Performance Panel – fine-tune browser performance

Our new multi-process architecture allows Firefox to easily handle complex websites, particularly when you have many of them loaded in tabs. We believe we’ve struck a good balance for most computers, but for those of you who are tinkerers, you can now adjust the number of processes up or down in this version of Firefox. This setting is at the bottom of the General section in Options.

Tip: if your computer has lots of RAM (e.g., more than 8GB), you might want to try bumping up the number of content processes that Firefox uses from its default four. This can make Firefox even faster, although it will use more memory than it does with four processes. But, in our tests on Windows 10, Firefox uses less memory than Chrome, even with eight content processes running.

Faster startup when restoring lots of tabs

Are you a tab hoarder? As part of our Quantum Flow project to improve performance, we’ve significantly reduced the time it takes to start Firefox when restoring tabs from a previous session. Just how much faster are things now? Mozillian Dietrich Ayala ran an interesting experiment, comparing how long it takes to start various versions of Firefox with a whopping 1,691 tabs open. The end result? What used to take nearly eight minutes, now takes just 15 seconds.

A faster and more stable Firefox for 64-bit Windows

If you’re running the 64-bit version of Windows (here’s how to check), you might want to download and reinstall Firefox today. That’s because new downloads on 64-bit Windows will install the 64-bit version of Firefox, which is much less prone to running out of memory and crashing. In our tests so far, the 64-bit version of Firefox reduces crashes by 39% on machines with 4GB of RAM.

If you don’t manually upgrade, no worries. We intend to automatically migrate 64-bit Windows users to 64-bit Firefox in our next release.

A faster way to search

We’re all searching for something. Sometimes that thing is a bit of information – like a fact you can glean from Wikipedia. Or, maybe it’s a product you hope to find on Amazon, or a video on YouTube.

With today’s Firefox release, you can quickly search using many websites’ search engines, right from the address bar. Just type your query, and then click which search engine you’d like to use.

Out of the box, you can easily search with Yahoo, Google, Bing, Amazon, DuckDuckGo, Twitter, and Wikipedia. You can customize this list of search engines in settings.

Even more

Here are a few more interesting improvements shipping today:

• Parts of a web page that use Flash must now be clicked and given permission to run. This improves battery life, security, and stability, and is a step towards Flash end-of-life.
• You can now move the sidebar to the right side of the window.
• Firefox for Android is now translated in Greek and Lao.
• Simplify print jobs from within print preview.

As usual, you can see everything new in the release notes, and developers can read about new APIs on the Mozilla Hacks Blog.

We’ll keep cranking away – much more to come!

• Download Firefox for Windows, Mac, Linux
• Release Notes for Firefox for Windows, Mac, Linux
• Download Firefox for Android
• Release Notes for Firefox for Android

 

 

The post Firefox Is Better, For You. WebVR and new speedy features launching today in Firefox appeared first on The Mozilla Blog.

I am trying to bundle my vuejs2 and typescript code using webpack and I'm receiving the error

Cannot find module 'path/file.vue'

According to this question, I need to generate .d.ts files which I have done using vuetype. The .d.ts files are in the same directory as the .vue files. This structure satisfies my linter so it doesn't show errors, but when I try to build with Webpack, I receive the error. How can I tell webpack where to find my .vue files?

webpack.config.js const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry: { Evaluations: './WebResources/js/Evaluations.ts' }, devServer: { contentBase: './dist' }, module: { rules: [{ test: /\.ts$/, exclude: /node_modules|vue\/src/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/] } }, { test: /\.vue$/, loader: 'vue-loader', options: { esModule: true } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] }, ] }, resolve: { extensions: [".tsx", ".ts", ".js", ".vue"], alias: { 'vue$': 'vue/dist/vue.esm.js' } }, plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ filename: 'Evaluations.html', template: './WebResources/html/Evaluations.html' }), new webpack.optimize.CommonsChunkPlugin({ name: 'WebAPI' }) ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } } Evaluations.ts "use strict"; import Vue from 'vue'; import CommentBox from '../components/CommentBox.vue'; import SignOff from '../components/SignOff.vue'; import Rating from '../components/Rating.vue'; import Competency from '../components/Competency.vue'; import EvaluationMain from '../components/EvaluationMain.vue'; new Vue({ el: "#evaluations-app", components: { 'comment-box': CommentBox, 'sign-off': SignOff, 'rating': Rating, 'competency': Competency, 'evaluation': EvaluationMain } });

I did try to add 'CommentBox$' : '../WebResources/components/CommentBox.vue' to my webpack config file, but without success. I also tried a variety of locations inside node_modules for my .d.ts files, but without success. It's possible I did not put them in the correct location in node_modules.

I'm wanting to test a vuejs component where I call vue-i18n $t() to translate my texts and this.$route.name.

The test I created passes but with many ERROR LOG:

ERROR LOG: '[Vue warn]: Error in render function: "TypeError: undefined is not a function (evaluating '_vm.$t('contact')')"

ERROR LOG: '[Vue warn]: Error in mounted hook: "TypeError: undefined is not an object (evaluating 'this.$route.name')"

Here is my main.js

import Vue from 'vue'; import VueI18n from 'vue-i18n' import router from './router'; import messages from './messages'; Vue.use(VueI18n); const i18n = new VueI18n({ fallbackLocale: 'fr', locale: 'fr', messages, }); Vue.config.productionTip = false let vm = new Vue({ el: '#app', i18n, router, }); // Once page is reloaded i18n.locale = vm.$route.params.locale;

And here is my test: MyComponent.spec.js

describe('MyComponent', () => { // other tests on the object MyComponent (not its instance) // Mount an instance and inspect the render output it('renders the correct message', () => { const Ctor = Vue.extend(MyComponent); const vm = new Ctor().$mount(); }); });

When I try to inject i18n:

const vm = new Ctor(new VueI18n({fallbackLocale: 'fr', locale: 'fr', messages,})).$mount();

I get this error

PhantomJS 2.1.1 (Linux 0.0.0) ERROR TypeError: undefined is not an object (evaluating 'Vue.config')

I'm working on vueJs in symfony project. I have a vue that worked great until few days. I didn't change anything that have something to do with that vue but with no reason since few days, it doesn't work on chrome (wich i use since the beggining) but works great on firefox.

So what I do is a select :

<select v-model="selectedStock"> <option :value="stock.id"v-for="stock in stocks">{{ stock.name }}</option> </select>

my "stocks" ara init with that :

loadStocks () { this.$http({ url: 'api/stocks', method: 'get' }).then( response => { this.stocks = response.data }) },

and my function called by the route api/stocksis :

public function indexAction () { $em = $this->getDoctrine()->getManager(); $stocks = $em->getRepository('RBOrdersBundle:Stock')->findAll(); return new JsonResponse($this->get('rb.serializer')->onEntity($stocks)->toArray()); }

and when i'm going on local/api/stocks I have an array with 2 object

and when in loadStocks() in the response part I do : alert(typeof response.data) chrome give me string and firefox give me Object

And finally the console in chrome show me :

main.js:39752 [Vue warn]: Duplicate value found in v-for="stock in stocks": "0". Use track-by="$index" if you are expecting duplicate values. (found in component: <reassort-tool>) but like 20 times with a bunch of different letter and I'm pretty sure there is no duplicate in my array

i am trying to do a switch case based on a select list that i have on my component.

<div class="col-md-7"> <select class="form-control" id="sel1" v-model="getDocumentSettings.margin" @change="customMargin(getDocumentSettings.margin)"> <option v-for="item in getMarginOptions">{{item}}</option> </select> </div>

getMarginOptions is a computed propertie that returns me a list of choices, that can be

marginOptions: [ "Custom", "Normal", "Narrow", "Moderate", "Wide", "Mirrored", "Office Default" ]

this data is in vuex store and is retrieved, my problem is to change other data based on the selection, when a user select a propertie i want to change margins(left,right,top,bottom) that i have in this object(inside vuex too)

Doc: { key: "Document", left: 0, right: 0, top: 0, fileName: "", bottom: 0, margin: "Custom", },

so i put a swtich case inside my vuex like this:

actions: { customMargin(obj) { switch (obj.data) { case "Custom": obj.type.Doc.left = 0; obj.type.Doc.right = 0; obj.type.Doc.top = 0; obj.type.Doc.bottom = 0; break; case "Normal": obj.type.Doc.left = 1; obj.type.Doc.right = 1; obj.type.Doc.top = 1; obj.type.Doc.bottom = 1; break; case "Narrow": obj.type.Doc.left = 0.5; obj.type.Doc.right = 0.5; obj.type.Doc.top = 0.5; obj.type.Doc.bottom = 0.5; break; case "Moderate": obj.type.Doc.left = 0.75; obj.type.Doc.right = 0.75; obj.type.Doc.top = 1; obj.type.Doc.bottom = 1; break; case "Wide": obj.type.Doc.left = 2; obj.type.Doc.right = 2; obj.type.Doc.top = 1; obj.type.Doc.bottom = 1; break; case "Mirrored": obj.type.Doc.left = 1.25; obj.type.Doc.right = 1; obj.type.Doc.top = 1; obj.type.Doc.bottom = 1; break; case "Office Default": obj.type.Doc.left = 1.25; obj.type.Doc.right = 1.25; obj.type.Doc.top = 1; obj.type.Doc.bottom = 1; break; default: obj.type.Doc.left = 0; obj.type.Doc.right = 0; obj.type.Doc.top = 0; obj.type.Doc.bottom = 0; break; } } }

it should receive a state object so i can access my doc,and the option that was selected, this is how i call it:

methods: { customMargin(option) { this.$store.dispatch({ type: 'customMargin', data: option }) }, },

i think 1 of my problem is the way how i handle actions with vuex, i want to send the option from the select and change the doc margin inside vuex.

Any help?