Software

I'm creating bootstrap modals with vue js and i following tutorial but with a few tweaks, and it works just fine but now when i have long modals i got some issue about scrolling page, since it is only scrolling page behind the modals but not the modals

here is my modal.vue component

<template> <div class="modal-mask" @click="close" v-show="created"> <transition name="modal" enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown" mode="out-in" v-on:enter="beforeEnter" v-on:after-leave="afterLeave" > <div class="modal-dialog" :class="size" v-if="show" @click.stop> <div class="modal-content"> <div class="modal-header" :class="color"> <button type="button" class="close" @click="close">&times;</button> <h6 class="modal-title"> <slot name="title"></slot> </h6> </div> <div class="modal-body"> <slot></slot> </div> <div class="modal-footer"> <slot name="button"></slot> </div> </div> </div> </transition> </div> </template> <script> export default{ props: ['show','color','size'], data(){ return{ created: false, } }, mounted(){ document.addEventListener("keydown", (e) => { if (this.show && e.keyCode == 27) { this.close(); } }); }, methods: { close(){ this.$emit('close'); }, beforeEnter(){ this.created = true }, afterLeave(){ this.created = false } } } </script> <style> .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); transition: opacity .3s ease; } </style>

and to i just need to import this modal.vue component into any page that i needed.

so how to fix this scrolling issue?

I recently moved from Vue.js to Quasar (which is just a set of components for Vue.js applications)

I have two different applications, one written using vue-cli and one with quasar-cli. The one with vue-cli has all test structure in place, I can just execute npm run unit and it finds all my mocha tests and run them.

I have then copied the same structure into my quasar project. It builds and run in dev mode correctly but when I execute this command:

cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

I get these errors:

• Typescript emitted no output for ..\src\sfc.d.ts
• Module parse failed: ..\src\index.html Unexpected token (1:0) You may need an appropriate loader to handle this file type.
• Module not found: Error: Can't resolve 'quasar/dist/quasar.start.css' in '..\src'

Somehow I am missing some configuration which is needed before I start karma. Any clue? In Vue.js using Typescript the same configuration is working just fine.

after running correctly this unit test, the coverage is incomplete as I can see in lcov-report/src/vuex/actions.js.html .., only

return api.addNewShoppingList(shoppinglist)

is executed (1x), not the code inside the .then() block

thanks to anyone who can give me some feedback on this issue? ( if it's an issue.. or normal behavior )

actions.spec.js

import actions from '@/vuex/actions' import * as types from '@/vuex/mutation_types' describe('actions.js', () => { var server, store, lists, successPost successPost = {'post': true} beforeEach(() => { // mock shopping lists lists = [{ id: '1', title: 'Groceries' }, { id: '2', title: 'Clothes' }] // mock store commit and dispatch methods store = { commit: (method, data) => {}, dispatch: () => { return Promise.resolve() // static method }, state: { shoppinglists: lists } } sinon.stub(store, 'commit') // mock server server = sinon.fakeServer.create() server.respondWith('POST', /shoppinglists/, xhr => { xhr.respond(200, {'Content-Type': 'application/json'}, JSON.stringify(successPost)) }) server.autoRespond = true }) afterEach(() => { store.commit.restore() server.restore() }) describe('createShoppingList', () => { it('should return successful POST response', () => { let newList = { title: 'new list', id: '3' } actions.createShoppingList(store, newList).then((resp) => { expect(resp.body).to.eql(successPost) }) }) }) })

actions.js

import * as types from './mutation_types' import api from '../api' import getters from './getters' export default { populateShoppingLists: ({ commit }) => { return api.fetchShoppingLists().then(response => { commit(types.POPULATE_SHOPPING_LISTS, response.data) }) }, createShoppingList: (store, shoppinglist) => { return api.addNewShoppingList(shoppinglist) .then(() => { store.commit(types.ADD_SHOPPING_LIST, shoppinglist) store.dispatch('populateShoppingLists') }) }, }

api/index.js

import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource) const ShoppingListsResource = Vue.resource('http://localhost:3000/' + 'shoppinglists{/id}') export default { addNewShoppingList: (data) => { return ShoppingListsResource.save(data) } }

mutations.js

import * as types from './mutation_types' import getters from './getters' import _ from 'underscore' export default { [types.POPULATE_SHOPPING_LISTS] (state, lists) { state.shoppinglists = lists }, [types.ADD_SHOPPING_LIST] (state, newList) { if (_.isObject(newList)) { state.shoppinglists.push(newList) } } }

mutations.types

export const POPULATE_SHOPPING_LISTS = 'POPULATE_SHOPPING_LISTS' export const ADD_SHOPPING_LIST = 'ADD_SHOPPING_LIST'

getters.js

import _ from 'underscore' export default { getLists: state => state.shoppinglists, }

console

mymac:lcov-report yves$ npm run unit > shopping-list@1.0.0 unit /Users/yves/Developments/shopping-list > cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/ [launcher]: Launching browser PhantomJS with unlimited concurrency launcher]: Starting browser PhantomJS [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket -XTe5WWPBnSfAtg_AAAA with id 73492961 actions.js ... createShoppingList ✓ should return successful POST response PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 13 of 13 SUCCESS (0.086 secs / 0.034 secs) TOTAL: 13 SUCCESS =============================== Coverage summary ================== Statements : 64.44% ( 29/45 ) Branches : 50% ( 2/4 ) Functions : 81.25% ( 13/16 ) Lines : 64.44% ( 29/45 ) ================================================================

lcov-report/src/vuex/actions.js.html

import * as types from './mutation_types' import api from '../api' import getters from './getters' export default { createShoppingList: (store, shoppinglist) => { **1× return api.addNewShoppingList(shoppinglist)** .then(() => { store.commit(types.ADD_SHOPPING_LIST, shoppinglist) store.dispatch('populateShoppingLists') }) }, }

On October 10, EU lawmakers will vote on a dangerous proposal to change copyright law. Mozilla is urging EU citizens to demand better reforms.

 

On October 10, the European Parliament Committee on Legal Affairs (JURI) will vote on a proposal to change EU copyright law.

The outcome could sabotage freedom and openness online. It could make filtering and blocking online content far more routine, affecting the hundreds of millions of EU citizens who use the internet everyday.

Dysfunctional copyright reform is threatening Europe’s internet

Why Copyright Reform Matters

The EU’s current copyright legal framework is woefully outdated. It’s a framework created when the postcard, and not the iPhone, was a reigning communication method.

But the EU’s proposal to reform this framework is in many ways a step backward. Titled “Directive on Copyright in the Digital Single Market,” this backward proposal is up for an initial vote on October 10 and a final vote in December.

“Many aspects of the proposal and some amendments put forward in the Parliament are dysfunctional and borderline absurd,” says Raegan MacDonald, Mozilla’s Senior EU Policy Manager. “The proposal would make filtering and blocking of online content the norm, effectively undermining innovation, competition and freedom of expression.”

Under the proposal:

• If the most dangerous amendments pass, everything you put on the internet will be filtered, and even blocked. It doesn’t even need to be commercial — some proposals are so broad that even photos you upload for friends and family would be included.

 

• Linking to and accessing information online is also at stake: extending copyright to cover news snippets will restrict our ability to learn from a diverse selection of sources. Sharing and accessing news online would become more difficult through the so-called “neighbouring right” for press publishers.

 

• The proposal would remove crucial protections for intermediaries, and would force most online platforms to monitor all content you post — like Wikipedia, eBay, software repositories on Github, or DeviantArt submissions.

 

• Only scientific research institutions would be allowed to mine text and datasets. This means countless other beneficiaries — including librarians, journalists, advocacy groups, and independent scientists — would not be able to make use of mining software to understand large data sets, putting Europe in a competitive disadvantage in the world.

Mozilla’s Role

In the weeks before the vote, Mozilla is urging EU citizens to phone their lawmakers and demand better reform. Our website and call tool — changecopyright.org — makes it simple to contact Members of European Parliament (MEPs).

This isn’t the first time Mozilla has demanded common-sense copyright reform for the internet age. Earlier this year, Mozilla and more than 100,000 EU citizens dropped tens of millions of digital flyers on European landmarks in protest. And in 2016, we collected more than 100,000 signatures calling for reform.

Well-balanced, flexible, and creativity-friendly copyright reform is essential to a healthy internet. Agree? Visit changecopyright.org and take a stand.

The post A Copyright Vote That Could Change the EU’s Internet appeared first on The Mozilla Blog.

I want to do this: when I click the option,I send a request 。when the request success, I set the value with my clicked. when the request success fail,I keep the value origin ,before I clicked.

A plugin I use creates dynamic html and I want to add a dynamic background-color using a hex passed via props.

This is the html in my component

<template> <div class="pagination" slot="pagination"></div> </template>

Generates dynamic HTML of this

<div class="pagination" slot="pagination"> <span class="swiper-pagination-bullet"></span> <span class="swiper-pagination-bullet"></span> </div>

The components receives props

props: ['primaryBgColor']

I can obviously see the color in the template if I write

<template> <div> {{ this.primaryBgColor }} </div> </template>

However when I write a style within the component like

<style> .swiper-pagination-bullet { background-color: {{ this.primaryBgColor }} } </style>

Webpack returns an error saying I have a CSS syntax error. Any ideas?

I tried to make my Load More data when my page scroll to the bottom. The first thing is I make a div element that I put at the end of the data loop.

<div class="products"> <p>{{ status }}</p> <div class="product" v-for="(item, index) in items"> <div> <div class="product-image"><img :src="item.link" alt=""></div> </div> <div> <h4 class="product-title">{{ item.title }}</h4> <p>Price : {{ price }}</p> <button class="add-to-cart btn" @click="addItem(index)">Add Item To Cart</button> </div> </div> <div id="product-list-bottom"></div> </div>

Div element with id product-list-bottom I will detect it using scrollMonitor.js

My default data :

data: { status: 'Empty product', total: 0, items: [], cart: [], newSearch: 'anime', lastSearch: '', price: STATIC_PRICE, result: [] }

Inside mounted I detected scroll to bottom :

mounted: function() { this.onSubmit() var vueInstance = this var elem = document.getElementById('product-list-bottom') var watcher = scrollMonitor.create(elem) watcher.enterViewport(function() { vueInstance.appendItems() }) }

Inside mounted I call onSubmit :

onSubmit: function() { this.items = '' this.status = "Searching keyword '" + this.newSearch + "' on server ..." this.$http.get('/search/'.concat(this.newSearch)) .then(function(response) { this.lastSearch = this.newSearch, this.status = 'Find ' + response.data.length + ' data' this.result = response.data this.appendItems() }) }

And inside onSubmit I call appendItems function :

appendItems: function() { if(this.items.length < this.result.length) { var start = this.items.length var end = parseInt(this.items.length + 5) var append = this.result.slice(start, end) this.items = this.items.concat(append) console.log(append) } }

All goes well, but when I scroll down I get an error message :

This is because this line :

this.items = this.items.concat(append)

How do I make the data on xxx change (always added five new data from the array) according to the command on the line :

var end = parseInt(this.items.length + 5)

Thanks

I'm creating vue js spa and what i trying to create is when i click on table row, it will show a modals with/showing data from the row that i clicked on.

here i have created my table

<tr class="cursor-pointer" @click="modalContextMenu"> <td> <img :src="'/images/artikel/' + props.item.images + 'n.jpg'" class="img-rounded img-sm" v-if="props.item.images"> <img :src="'/images/image-articlen.jpg'" class="img-rounded img-sm" v-else> </td> <td>{{props.item.name}}</td> <td>{{props.item.category.name}}</td> <td>{{props.item.writter}}</td> <td v-html="$options.filters.checkStatus(props.item.publish)"></td> <td v-html="$options.filters.checkStatus(props.item.featured)"></td> <td>{{props.item.created_at | publishDate}}</td> </tr>

at <tr> i put @click methods that make modal show and data that i want to show into modals is data from each <td> for that row / <tr>

right now my modalContextMenu methods is basically make modals visible/appear like this

modalContextMenu(){ this.modalShow= true; }

I'm using Rails 5.1 + Webpack running Vue 2. I'm fairly new to Vue, not so new to Rails.

I'm building a navbar component starting from the Bulma navbar. My objective is to be able to dynamically create links in the navbar by simply adding a navlink element nested within.

In my application.html.erb I have already created this structure (navlink nested inside navbar).

In hello_vue.js I'm initializing the Vue components and assigning them to a root element (one for the navbar and one for the rest of the content).

In navbar.vue, I'd like to iterate through all the and create a menu item accordingly. In order to do so, I added an empty navlinks data to navbar that I want to populate once it gets mounted() by fetching all its children (the nested navlink tags).

This is however not working, whenever I reference this.$children I get an empty array. Any idea why is this happening?

This is all the code.

application.html.erb

<!DOCTYPE html> <html> <head> <title>RailsVue</title> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <%= stylesheet_pack_tag 'hello_vue' %> </head> <body> <div id="navbar-container"> <navbar> <navlink href="http://google.com"> Link 1 </navlink> <navlink href="http://facebook.com"> Link 2 </navlink> </navbar> </div> <%= yield %> <%= javascript_pack_tag 'hello_vue' %> </body> </html>

hello_vue.js

import Vue from 'vue/dist/vue.esm' import App from './app.vue' import Navlink from './components/navlink.vue' import Navbar from './components/navbar.vue' const navbar = new Vue({ el: "#navbar-container", components: { Navbar, Navlink } }) const app = new Vue({ el: '#hello', data: { message: "Can you say hello?" }, components: { App } })

navbar.vue

<template> <div> <nav class="navbar is-transparent"> <div class="navbar-brand"> <a class="navbar-item" href="http://bulma.io"> <img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28"> </a> <div class="navbar-burger burger" data-target="navMenuTransparentExample"> <span></span> <span></span> <span></span> </div> </div> <div id="navMenuTransparentExample" class="navbar-menu"> <div class="navbar-start"> <a v-for="navlink in navlinks" class="navbar-item" :href="navlink.href"> <slot></slot> </a> </div> </div> </nav> </div> </template> <script> import Navlink from './navlink.vue' export default { name: "Navbar", data: function () { return { navlinks: [] } }, created: function(){ // let children = this.$children; console.log(this.$children); // this.navlinks = this.$children; // this.navlinks = this.$children; } } </script>

navlink.vue

<template> <div class="navlink"> <slot></slot> </div> </template> <script> export default { name: "Navlink" } </script>

the initialized app ( vue init webpack my-project ) compiles successufly on the vps but when visiting "servername:8080" it renders nothing, the terminal log: DONE Compiled successfully in 3245ms

Listening at http://localhost:8080

(node:23617) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3 (node:23617) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

the browser console shows this error: Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH app.js

thanks in progress :)

I want to make a simple VueJS app with the ability to use multiple APIs, grab an image and display it to the user. This is my first try with Vue after watching some videos of a course, so please don't hate me if I dont use a VueJS function but use pure JS.

I want that the user clicks a button, then it will request an image from an API. What works is that it picks an api randomly, but for the Flickr API I need to specify a tag (which are saved in an array, picked randomly too). But it only picks the tag once and every time I call the function again it's the same tag! Means the function only gets executed once the page is reloaded.

Why is it like this and how can I fix it? Thanks in advance.

My code so far

var vm = new Vue({ el: '#app', data() { return { // some data apis: [this.flickr(), this.desktopper()], wallpaper: '', wallpapers: [], screenWidth: window.screen.width, screenHeight: window.screen.height, } }, methods: { // The random function randomNumber(min, max) { return Math.floor(Math.random() * (max - min) + min); }, // The main function, calls an api and should get the image source requestWallpaper() { var wallpaper = this.apis[ this.randomNumber(0, this.apis.length) ]; console.log(wallpaper); }, // Flickr API request random image flickr() { // Most popular tags of all time on Flickr (tags are needed to request images)... var popularTags = ['sunset','beach','water','sky','red','flower','nature','blue','night','white','tree','green','flowers','portrait','art','light','snow','dog','sun','clouds','cat','park','winter','landscape','street','summer','sea','city','trees','yellow','lake','christmas','people','bridge','family','bird','river','pink','house','car','food','bw','old','macro','music','new','moon','orange','garden','blackandwhite']; // Grab a random tag var tag = popularTags[ this.randomNumber(0, popularTags.length) ]; return tag; }, // Desktopper.co API request random image desktopper() { return 'desktoppr'; } } });

In my Vue.js project I have the following Vuex action:

import { HTTP } from '@/services/http' export const actions = { loginUser ({ commit }, params) { HTTP.post( 'v1/login', { email: params.email, password: params.password } ).then(response => { localStorage.setItem('access_token', response.data.token) commit('SET_USER', response.data) }).catch(error => { commit('SET_LOGIN_ERROR', error.response.data.error) }) } }

I'm using Mocha + Karma for unit tests. How can I test that action?

I am building an app with Vue and also Firebase. I am new to Firebase and i've some problems with it. I try to store names + emails in the database. What I want is to check first if the email is already in the database and if not, run another function that will store the name + email. If the email is stored in the database I would like to output an alert and cancel the submit.

So the check of the email in the database is going quite well, it will output an alert, and also I am able to retrieve the data. But where the problem lays is that when I enter an email that is not in the database. When I enter a new email (and name) it will check the database and return false but then right away does another call (I dont know why, that's the problem I guess) and it will return true, and the alert of already being there, at the same time. Then it will proceed to another function to store the data because that was the output of the first call (which was false).

My JS code:

checkForm() { let app = this; if (this.name == '' || this.emailadress == '') { alert('You have to fill out the form'); } else { app.getFirebase(); } }, getFirebase() { let app = this; var ref = firebase.database().ref().child('/aanmeldingen/'); ref.on('value', function(snapshot) { const array = []; snapshot.forEach(function(childSnapshot) { var checkEmail = childSnapshot.val().email; array.push(checkEmail); }); const res = array.includes(app.emailadress); console.log(array); console.log(res); if(res) { alert('You already have entered the giveaway'); } else if (res == false) { app.store(); } }); }, store() { this.step_two = false; this.active_two = false; this.active_three = true; this.step_three = true; let app = this; firebase.database().ref('/aanmeldingen/').push({ username: app.name, email: app.emailadress, }); }

Screenshot of console (entered Jane, not in the database)

Can you please tell me how to properly add components to other components? The example below does not work. The child component is not displayed inside the parent.

<div id="app"> <parent> <child></child> </parent> </div> <template id='child'> <div>child component</div> </template> <template id='parent'> <div>parent component</div> </template> <script> var child = { template: '#child', data: function () { return {} } }; var parent = { template: '#parent', data: function () { return {} } }; new Vue({ el: '#app', components: { 'parent': parent, 'child': child } }) </script>

sample: https://jsfiddle.net/05gc05sk/1/

how to properly nest components?

I'd like to separate client and server completely, so I created a vuejs project with vue init webpack my-project. In this project I'm using vue-router for all my routing (this includes special paths, like /user/SOMEID..

This is my routes.js file:

import App from './App.vue' export const routes = [ { path: '/', component: App.components.home }, { path: '/user/:id', component: App.components.userid }, { path: '*', component: App.components.notFound } ]

When I run the application using npm run dev everything works perfectly. I'm now ready to deploy to cloud, so I ran npm run build. Since I need to use a HTTP Server, I decided to use Go for that as well.. this is my Go file:

package main import ( "fmt" "github.com/go-chi/chi" "github.com/me/myproject/server/handler" "net/http" "strings" ) func main() { r := chi.NewRouter() distDir := "/home/me/code/go/src/github.com/me/myproject/client/dist/static" FileServer(r, "/static", http.Dir(distDir)) r.Get("/", IndexGET) http.ListenAndServe(":8080", r) } func IndexGET(w http.ResponseWriter, r *http.Request) { handler.Render.HTML(w, http.StatusOK, "index", map[string]interface{}{}) } func FileServer(r chi.Router, path string, root http.FileSystem) { if strings.ContainsAny(path, "{}*") { panic("FileServer does not permit URL parameters.") } fs := http.StripPrefix(path, http.FileServer(root)) if path != "/" && path[len(path)-1] != '/' { r.Get(path, http.RedirectHandler(path+"/", 301).ServeHTTP) path += "/" } path += "*" r.Get(path, http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { fs.ServeHTTP(w, r) })) }

I'm able to load the home page (App.components.home) where everything seem to work (the css, the images, translations, calls to and responses from the server).. but when I try to open other routes that should either result in 404 or load a user, then I just get the response 404 page not found in plaintext (not the vue notFound component it's supposed to render)..

Any ideas what I'm doing wrong and how to fix it?

I have a Vue v2.3.4 (quasar-framework v0.14.2) modal ComponentA working when clicking on a button in the same component. The MyModal component seems to work fine (as I can trigger it with a button). However I have code in a separate util.js file which should trigger the modal (from a 'myUtilElement'). How can I do that?

ComponentA.vue

<template> <div> <div id='lotsofstuff'></div> <myModal ref="modalTest"></myModal> </div> </template> <script> import MyModal from '../MyModal.vue' export default { name: 'componentA', components: {MyModal}, methods: { openModal: function () { this.$refs.myModal.open() }, otherMethods:...etc. }

Util.js

import ComponentA from '../ComponentA.vue' myUtilElement.addEventListener('click', triggerModal, false) function triggerModal () { ComponentA.methods.openModal() }

I now get following error in the console:

Uncaught TypeError: Cannot read property 'openModal' of undefined at HTMLElement.triggerModal

In my small Vue application, I'm trying to call the same method (emptyDivision) with different parameters from within another method (buttonClick). I set a 5-second timeout for the second invocation of that method, but this delay is not being recognized when I trigger these two functions by executing buttonClick.

<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.1.1/vuex.min.js"></script> </head> <body> <div id="app"> <button v-on:click="buttonClick">Simulate Placement</button> <h1>Random Division 1</h1> <p>{{A.One}}</p> <p>{{A.Two}}</p> <h1>Random Division 2</h1> <p>{{B.One}}</P> <p>{{B.Two}}</p> </div> <script type="text/javascript"> new Vue({ 'el': '#app', 'data': { 'A': {'One': "", 'Two': "" }, 'B': {'One': "", 'Two': "" }, 'Division1': ["Steelers", "Ravens"], 'Division2': ["Broncos", "Raiders"], }, 'methods': { 'emptyDivision': function(division){ this.A[division] = this.popTeam(division)[0]; this.B[division] = this.popTeam(division)[0]; }, 'popTeam': function(division) { if (division === "One"){ return this.Division1.splice(Math.floor(Math.random()*this.Division1.length), 1); } return this.Division2.splice(Math.floor(Math.random()*this.Division2.length), 1); }, 'buttonClick': function() { setTimeout(function() {console.log("This appears after 3 seconds")}, 3000); setTimeout(this.emptyDivision("One"), 5000); /*Teams in division one ("Steelers" and "Ravens") should be propagated to the DOM after 5 seconds, but it's being evaluated at the same time as the invocation to this.emptyDivision("Two") */ this.emptyDivision("Two"); /* I expect ("Broncos" and "Raiders" to be rendered to the DOM first due to the timeout, but this is not happening*/ } } }) </script> </body> </html>

After inspecting the console, the three-second timeout log statement is evaluated and produces the expected behavior, but the five-second timeout to emptyDivision("one") does not appear to be working, as detailed by the comments I left in the above code.

I'm developing a single page application / mobile app, with VUE JS, I want a slide effect when changing the pages, and I can do it like this:

transition name="slide" router-view transition transition

But I wanted the reverse effect of the slide when the user returns the page, in other words, when the user opens a new page, the page will come from the right, when they go back, the page will come from the left. There is a plugin for vue router, called vue-router-transition https://www.npmjs.com/package/vue-router-transition But it does not work, it is out of date, it only works with very old versions of the vue

Also there is a tutorial on how to make dynamic transitions, but only works when it is parents routes, ex: site.com/rota1/rota2/rota3 Which is not my case https://router.vuejs.org/en/advanced/transitions. html

I thought of the following logic in the before.each.router, set the transition class, (slide-left or slide-right) depending on whether the user clicked on a go back button, the problem is that I do not know how to apply this logic in code, I would have to pass the value of a variable that is in main.js to the app.vue and I do not know how to do this ...

If anyone can help me, thank you!

My component has in data section:

photos: ['images\1.jpg','images\2.jpg']

In template (pug) :

... v-carousel v-carousel-item(v-for='(item,i) in photos',:key='i', :src='item')

I got 2 warnings:

[Vue warn]: Invalid prop: type check failed for prop "src". Expected String, got Number. found in --->

If

:src='item'

change to

:src='item.toString()'

there are no warnings.

Is it Vue or Vuetify or my error?

I would like to share my Vue js application project which is in my repository with a friend. So I used vue-cli, npm/yarn and webpack to develope. I would like to know if he needs to install also cli to run the app on his computer, or just npm install and npm run? thanks