Software

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?

I came across this issue in my project, and I reproduce it in the following demo: https://jsfiddle.net/baoqger/jeeh5ncp/

Briefly speaking,

var demo = new Vue({ el: '#demo', data: { newitem: '', allData: [], }, methods: { addItem() { this.allData.push(this.newitem); }, sendMessage() { Bus.$emit('send-message'); }, showAll() { console.log(this.allData.length); }, }, })

I use addItem method add item to the allData property,which is a list. And sendMessage to emit event out, which will be listened by child component. The showAll is simply show the current length of the allData list.

for the child component, it goes as following :

Vue.component('service', { template: '<div>' + '<span>{{serviceName}}</span>' + '<button @click="remove">X</button>' + '</div>', props: ['serviceName', 'index'], methods: { remove() { this.$emit('remove'); }, }, created() { Bus.$on('send-message', () => { console.log(this.index); }) }, })

Each child component can be removed by click the x button. And in the created hook, set up the event listen for send-message.

the HTML part is as following:

<div id="demo"> <input v-model="newitem"> <button @click="addItem">Add</button> <button @click="sendMessage">Send Message</button> <button @click="showAll">Show</button> <service v-for="(each, index) in allData" :service-name="each" @remove="allData.splice(index,1)" :index="index"></service> </div>

The confusing point is, for example I add 3 child component. And click the send Message button, I can get 0 1 2, which is expected. But if I remove one child element, and click the send Message button, still get 0 1 2. But the length is 2. So what's wrong with that?

var data = [ { id:1, account_name:'Akshay Patil', debit:111, credit:'' }, { id:2, account_name:'Bharat Chavan', debit:222, credit:'' }, { id:3, account_name:'Chetan Kore', debit:333, credit:'' }, { id:4, account_name:'Dilip Patil', debit:444, credit:'' }, { id:5, account_name:'Eshawr Dange', debit:555, credit:'' }, { id:6, account_name:'farhan Khan', credit:666, debit:'' }, { id:7, account_name:'Ganesh Shine', credit:777, debit:'' }, { id:8, account_name:'Hemant Birje', credit:888, debit:'' } ]

problem happen when object remove from array after random number are generated that time is random number is greater than array of length then error like Cannot read property.

I'm trying to build small application on Vuejs 2.0 where I'm having component file named Text.Vue and following are the components:

<template> <!-- Post --> <div class="blog-item" v-for="item in items"> <!-- Post Title --> <h2 class="blog-item-title font-alt"><a href="#">{{ item.title }}</a></h2> <!-- Author, Categories, Comments --> <div class="blog-item-data"> <a href="#"><i class="fa fa-clock-o"></i> {{ item.created_at }} </a> <span class="separator">&nbsp;</span> <a href="#"><i class="fa fa-user"></i> John Doe</a> <span class="separator">&nbsp;</span> <i class="fa fa-folder-open"></i> <a href="">Design</a>, <a href="#">Branding</a> <span class="separator">&nbsp;</span> <a href="#"><i class="fa fa-comments"></i> 5 Comments</a> </div> <!-- Text Intro --> <div class="blog-item-body"> <p> {{ item.content }} </p> </div> <!-- Read More Link --> <div class="blog-item-foot"> <a href="#" class="btn btn-mod btn-round btn-small">Read More <i class="fa fa-angle-right"></i></a> </div> </div> <!-- End Post --> </template> <script> export default { data() { return { title: 'POST WITH TEXT ONLY', contents: 'Suspendisse accumsan interdum tellus, eu imperdiet lacus consectetur sed. Aliquam in ligula ac lacus blandit commodo vel luctus quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eu ultrices mauris.', date_time: '4 December', items: [] } }, beforeCreate() { axios.get('/Blog/api/posts').then(response => { if(response.status === 200) { this.items = response.data.posts } }) } } </script>

While doing npm run dev or compiling the asset file I'm getting and error:

• Cannot use v-for on stateful component root element because it renders multiple elements.

I don't know where I'm doing mistake, help me out in this.

Thanks

How to access JSON objects in the vue.js app I am new in this

import json from './json/data.json'

the JSON file is loaded and now I have to access the objects within it

I'm starting with Vue.js and I'm struggling with the components part.

I've created a component with a template and some data, I want the code to be triggered after creating a new item (cocoon:after-insert event here) :

$(document).ready -> $('*[data-iceberg]').each -> new Iceberg($(this)) $('table.list').on 'cocoon:after-insert', (event, inserted) -> new Iceberg($(inserted), "add") if inserted? $('*[data-unit-name]').each -> $(this).find('.item-population-unit-name').html($(this).attr('data-unit-name')) Vue.component('storing', { template: '<span> {{storingArea}} - {{quantity}} </span>', data: -> { storingArea : 'No area', quantity: 0 } }) new Vue { el: '#storingDisplay' }

HTML/HAML part (the component is called on the 5th '%td') :

%tbody.nested-fields.delivery-item.incoming-parcel-item{ data: { iceberg: true } } %tr.item-display.hidden %td.act - if f.object.destroyable? = link_to_remove_association(content_tag(:i) + h(:destroy.tl), f, 'data-no-turbolink' => true, class: 'destroy remove remove-item') %td.act = link_to("#", class: 'edit edit-item', data: { edit: "item-form" }) do %i = :edit.tl %td %label{ data: { item_value: "input.parcel-item-variant" } }= f.object.variant ? f.object.variant.name : '??????' %label{ data: { item_value: "input.item-non-compliant" } }= non_compliant_message if f.object.non_compliant? %td %label %span{ data: { item_value: "span.total-quantity" } }= f.object.population %span{ data: { item_value: "span.item-population-unit-name" } }= f.object.variant ? f.object.variant.unit_name : '#' %td #storingDisplay %storing %td %label{ data: { item_value: "input.item-delivery-mode:checked" } }= f.object.delivery_mode

The current behavior is that my component is well called and the template rendered correctly on the first item created but only on the first one, it is not on the following ones even if i'm seing <storing></storing> when inspecting the element where the template should be displayed.

I'm probably not using the good practices to achieve what I want and i'm losing myself in the documentation so some help would be welcome :)

I am trying to add the simple jsColor lib to my vuejs project, i am working with webpack simple in vueJS.

So i want to add my script to this component:

<template> <div> <h3 class="text-center">Paragraph</h3> <div class="form-group"> <label for="fontSize" class="control-label col-md-2">font-size</label> <div class="col-md-2"> <input v-model="paragraph.fontSize" type="number" min="1" class="form-control"> </div> <div class="col-md-1"> <img class="changeColor" @click="alignment('left')" width="30" height="30" src="../../assets/left-alignment.png" /> </div> <div class="col-md-1"> <img class="changeColor" @click="alignment('center')" width="30" height="30" src="../../assets/center-alignment.png" /> </div> <div class="col-md-1"> <img class="changeColor" @click="alignment('right')" width="30" height="30" src="../../assets/right-alignment.png" /> </div> <div class="col-md-1"> <img class="changeColor" @click="alignment('justify')" width="30" height="30" src="../../assets/justify.png" /> </div> <div class="col-md-1"> <span>{{paragraph.align}}</span> </div> </div> <div class="row"> <div class="col-md-offset-2 col-md-6"> Color: #<input class="jscolor" v-model="paragraph.color"> </div> </div> <div class="form-group"> <label for="paragraph" class="control-label col-md-2">Text</label> <div class="col-md-8"> <textarea v-model="paragraph.text" class="form-control" rows="5" id="comment"></textarea> </div> </div> <div class="col-md-offset-2 col-md-8"> <button @click.prevent="addParagraph()" class="btn btn-success btn-block">Add Paragraph</button> </div> </div> </template> <script> import jsColor from '../../static/js/jscolor.js'; export default { data() { return { paragraph: { text: "", fontSize: 14, key: "Paragraph", align: "left", color: "000000", paragraph: {} } } }, methods: { addParagraph() { var paragraph = { key: this.paragraph.key, text: this.paragraph.text, fontSize: this.paragraph.fontSize, align: this.paragraph.align, } this.$store.commit("appendToDocument", paragraph) var panelObj = {"section":"paragraph","color":"list-group-item-success","action":"added"}; this.$store.commit("appendToPanel", panelObj); }, alignment(option) { this.paragraph.align = option; } }, } </script> <style> .margin-above { margin-top: 40px } .changeColor { padding: 5px; } .changeColor:hover { background-color: gray; } </style>

i already tried to add the import and the require, the only thing that worked was to use the mounted function inside vuejs lifecycle, but the problem is that it just reflects on the first page load, if open the component again the script is not working.

Any help?

I'm trying to migrate this sample dropdown menu from vue1 to vue2.

http://vuejsexamples.com/vue-dropdown-menu/

I've changed the ready method to mounted, removed the json filter and rewrote the for loop in close because it caused errors in the console.

Right now there aren't any errors while I run this, but still, the dropdown doesn't work properly - it does not close when I click outside of the menu. Can anybody help with migrating this?

new Vue({ el: '#menu', mounted: function() { var self = this window.addEventListener('click', function(e){ if (! e.target.parentNode.classList.contains('menu__link--toggle')) { self.close() } }, false) }, data: { dropDowns: { ranking: { open: false} } }, methods: { toggle: function(dropdownName) { this.dropDowns[dropdownName].open = !this.dropDowns[dropdownName].open; }, close: function() { for (var i = 0; i < this.dropDowns.length; i++) { this.dropDowns[dd].open = false; } } } }) body { margin: 2rem 0; } ul { list-style: none; } .menu { display: flex; } .menu__item { position: relative; padding-right: 3rem; } .menu__link { text-transform: uppercase; } .menu__icon { margin: 0 !important; } .open .dropdown-menu { display: block; } .dropdown-menu { font-size: 0.9rem; position: absolute; min-width: 130px; top: 2.2rem; display: none; box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2); border-radius: 4px; } .dropdown-menu__item:first-child .dropdown-menu__link { border-top-left-radius: 4px; border-top-right-radius: 4px; } .dropdown-menu__item:last-child .dropdown-menu__link { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .dropdown-menu__link { display: block; padding: 1rem; color: blue; background-color: #fafafa; } .dropdown-menu__link:hover { color: green; background-color: #ccc; } <script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script> <div id="menu"class="row"> <ul class="menu"> <li class="menu__item"> <a class="menu__link" href="#">Home</a> </li> <li class="menu__item menu__item--dropdown" v-on:click="toggle('ranking')" v-bind:class="{'open' : dropDowns.ranking.open}"> <a class="menu__link menu__link--toggle" href="#"> <span>Rangliste</span> <i class="menu__icon fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li class="dropdown-menu__item"> <a class="dropdown-menu__link" href="#">Aktuelle Runde</a> </li> <li class="dropdown-menu__item"> <a class="dropdown-menu__link" href="#">Siegerliste</a> </li> </ul> </li> <li class="menu__item"> <a class="menu__link" href="#">Belegungskalender</a> </li> </ul> <pre>{{ dropDowns }}</pre> </div>

I use a global bus to manage emitted and received events between components (sibling to sibling and child to parent). bus is defined as window.bus = new Vue() (which I know is not recommended but I failed to use import in a sustainable way).

It works fine but one drawback of such an approach is that I have to use a handler in the template of my component:

<template> (...) <div v-for="c in aList" v-on:click="emitcasedetails(c)">something</div> (...) </template> <script> export default { (...) methods: { emitcasedetails: function (c) { bus.$emit('casedetails', c._source) }, (...) } </script>

Again, this works fine but requires extra code.

I tried to directly

<div v-for="c in aList" v-on:click="bus.$emit(c._source)">something</div>

but bus is not defined when running the app.

Is a direct reference to the bus in the component's template possible or do I absolutely have to go via a handler?

I have trouble retrieving data from a REST-API using VueJS, axios, Async/Await with Promise(??). I need to call two different REST-APIs. One is giving me a list and I can iterate through it, which is fine.

<template> <div> <div v-if="posts && posts.length"> <div v-for="post of posts"> {{post.name}} <img :src="getUserPicturePath(post.name)" /> </div> </div> </div> </template>

The other, as you can see, in between the v-for, is calling a method which is using axios.

<script> import axios from 'axios' export default { data: () => { posts: [] } created() { // a method to fill up the post-array }, methods: { async getUserPicturePath(name){ const response = await axios.get('linkToApi'+name) console.dir(response.data.profilePicture.path) return response.data.profilePicture.path } } } </script>

The console.dir(response.data.profilePicture.path)- Part is giving the correct Path to the profilePicture, but the <img :src="getUserPicturePath(post.name)" /> above in the <template>, writes [Object Promise].

Any suggestion how I can get the path?

I have single page website, which I develop using vue.js. My main page, 'A', contains two iframes 'B' and 'C', which prevent from the 'back' button from working on the 'A'.

The wanted behavior is that the 'back' bypass the iframe, and influence only on the main page 'A'.

Just for testing, I added a fictive button 'back', which works as wanted on the parent page 'A':

<button @click="back"> back </button> methods: { 'back': function () { window.history.go(-3) } }

How should I bypass the native 'back' behavior to work on the parent page?

My controller

$pdf = PDF::loadView('pdf', $data); $pdf->setPaper('a6', 'landscape')->setWarnings(false); return $pdf->stream();

My function in VueJS

preview() { axios.post('/orders/preview') .then(function (response) { window.open("data:application/pdf," + encodeURI(response.data)); }) .catch(function (error) { // Error callback }); }

However I get this string in return

%PDF-1.3 1 0 obj << /Type /Catalog /Outlines 2 0 R /Pages 3 0 R >> endobj 2 0 obj << /Type /Outlines /Count 0 >> endobj 3 0 obj << /Type /Pages /Kids [6 0 R 10 0 R 13 0 R 18 0 R 21 0 R ...

If I try to open that with window.open it just opens an empty page... Should domPDF not open a new tab automatically with ->stream()? Or how can I open the pdf with the given string in JS?

I have some dynamic <input> elements in my dom rendered from for loop in vue. I need to add ref property to each of them by appending an Id to each ref like element1,element2,..etc. How to do this in vue?

<div v-for="(result, index) in data" :key="index"> <input type="text" type="file" ref="element" /> </div>

How to add ref if result.id exists

I am trying to import a JSON file into my main.js file using this:

import json from 'json/data.json'

Here is my JSON loader and I have also included the loader configurations:

{ test: /\.json$/, loader: 'json' }

Here is the error I am receiving:

ERROR in ./src/main.js Module not found: Error: Cannot resolve module 'json/data.json' in C:\pathto\project\src @ ./src/main.js 27:12-37

at the moment i am doing a file upload, basicly when i select a file i can edit his width and height and other stuffs, but my problem is related to the width and weight, basicly what i need is to get the width and height of the original image size, at the moment i can change it and it is working nice.

So i have this:

<div id="holder" class="col-md-offset-2"> <div v-if="!image"> <input type="file" @change="onFileChange"> </div> <div v-else> <div class="col-md-6"> <div class="form-group"> <label class="control-label col-md-2">width</label> <div class="col-md-10"> <input class="form-control" v-model="docImage.width" type="number" /> </div> </div> <div class="form-group"> <label class="control-label col-md-2">height</label> <div class="col-md-10"> <input class="form-control" v-model="docImage.height" type="number" /> </div> </div> data() { return { image: '', docImage: { key: 'Image', width: '100', height: '100', base64: "", align: "left", }, alignChoices: [ 'left', 'right', 'center' ] } }, onFileChange(e) { var files = e.target.files || e.dataTransfer.files; if (!files.length) return; this.createImage(files[0]); }, createImage(file) { var image = new Image(); var reader = new FileReader(); var vm = this; reader.onload = (e) => { vm.image = e.target.result; vm.docImage.base64 = vm.image.split(",")[1]; // get the base64 string defined after the comma }; reader.readAsDataURL(file); }, removeImage: function (e) { this.image = ''; },

I'm currently coding an app using SF3 for the back and VueJs for the front.

I use a controller action with the base route '/' to render the main template (with twig) containing the link to js files and the div binding for VueJs

The Vuejs app is a single page app and uses vue-router. The vue-router mode is set to history in production mode, that's where i have some trouble. The dev config uses the hash so no problem.

I would like to configure my nginx so that :

1. Checks if it matches a vuejs route
2. If not check that it matches a symfony route
3. If not then redirect to some 404 page

1 and 2 can be revert.

My current nginx location is (the default symfony one):

location / { try_files $uri /app.php$is_args$args; }

The issue is that when i reload a vuejs route in the browser i have a 404 errors, however navigating route to route works fine.

If it helps, all my symfony routes are prefixed by api/ or admin/

Thanks for your help !