# [Vue.js] How to switch pages using the VueJS router in the Electron protocol?There may be two cases for the address

https://i.imgur.com/04J5AIy.png

EN:
Like this picture, when using a Electron to make a browser. I use VueJS, vue.js router. Now to implement chrome://version/ such as Chrome browser.

CN:
electronvuevue.js routerchrome chrome://version/

EN:
there is read the electron documentation for a long time, but still can’t complete this function, I tried to register registerHttpProtocol, my index.html was sent as html to webview, and my js also sent the same content as index.html

CN:
electron documentationprotocolindex.html htmlwebview js index.html

import vue.js from ‘vue’;
import Router from ‘vue-router’;

import constant from ‘../../constant’;

Vue.use(Router);

export default new Router({
mode: ‘hash’,
base: __dirname,
routes: [
{
path: ‘/‘,
name: ‘browser’,
component: require(‘@/components/BrowserPage’).default,
meta: {
title: constant.config.productName,
icon: ‘static/icon/browser.png’,
},
},
{
path: ‘/browser’,
name: ‘private’,
component: require(‘@/components/PrivatePage’).default,
children: [
{
path: ‘setting’,
component: require(/* webpackChunkName: “setting” */‘@/components/PrivatePage/Setting’).default,
meta: {
title: ‘’,
icon: ‘static/icon/setting.png’,
},
},
],
meta: {
},
},
{
path: ‘*‘,
redirect: ‘/‘,
},
],
});

Normal should be /

browser://index #### file://${__dirname}/index.html browser://setting #### file://${__dirname}/index.html#/setting

browser://bookmark #### file://${__dirname}/index.html#/bookmark browser://history #### file://${__dirname}/index.html#/history

browser://index/css/style.css #### file://${__dirname}/css/style.css browser://index/js/vender.js #### file://${__dirname}/js/vender.js

browser://index/images/login.png #### file://${__dirname}/images/login.png Actually the address is / address #### actual address browser://index #### file://${__dirname}/index.html

browser://setting #### file://${__dirname}/index.html browser://bookmark #### file://${__dirname}/index.html

browser://history #### file://${__dirname}/index.html browser://index/css/style.css #### file://${__dirname}/index.html

browser://index/js/vender.js #### file://${__dirname}/index.html browser://index/images/login.png #### file://${__dirname}/index.html

There may be two cases for the address

const winURL = process.env.NODE_ENV === ‘development’
? ‘http://localhost:9080/index.html'
: file://${__dirname}/index.html; EN: How can I implement this function normally? How to combine elelctron protocol and vue.js router and let static resources load properly? CN: elelctron protocol vue.js router ### Solution : How about importing the router.js and using the push method? Something like this: import router from ‘./router.js’; router.push(‘/myroute’); # [Vue.js] Scrolling back to top slowly using Vuetify there is a button on my page that scrolls back to top of the page. It works but the sliding to be smooth and not instantly. What’s a good way to do it? Please note there are similar questions on this site but neither of them use Vuetify. This is my button: <v-btn class=”md-5 mr-3 elevation-21” dark fab button right color=”indigo darken-3” fixed @click=”top” \> This is my function: methods:{ top(){ window.scrollTo(0,0); } } ### Solution : Using the behavior option triggers an animated scroll in browsers that support it. window.scrollTo({ top: 0, left: 0, behavior: ‘smooth’ }); https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo ### Solution 2: try (open snippet on full-page) html { scroll-behavior: smooth; } function scrollme(selector) { console.log(‘xx’); document.querySelector(selector).scrollIntoView(); } html { scroll-behavior: smooth; } .d { width: 100px; height: 1000px; background: #eee; } .d:nth-child(odd) {background: #ddd; height: 100px; } <div class=”d start”></div> <button onclick=”scrollme(‘.end’)”>scroll</button> <div class=”d”></div> <div class=”d”></div> <div class=”d”></div> <button onclick=”scrollme(‘.start’)”>scroll</button> <div class=”d end”></div> # [Vue.js] Set custom varaible name in for loop Vue js Below is my code.This is not working because to make a dynamic key of object. <li v-for=”index in 6” :key=”index”> <div class=”input-fld”> <div class=”field”> <p class=”control has-icons-right”> <input type=”text” v-model=”formData[0].’line_‘{index}’_text’”/> </p> </div> </div> </li> like this <input class=”input” type=”text” v-model=”formData[0].line_1_text”/> <input class=”input” type=”text” v-model=”formData[0].line_2_text”/> <input class=”input” type=”text” v-model=”formData[0].line_3_text”/> <input class=”input” type=”text” v-model=”formData[0].line_4_text”/> <input class=”input” type=”text” v-model=”formData[0].line_5_text”/> <input class=”input” type=”text” v-model=”formData[0].line_6_text”/> ### Solution : Try to set custom names by bracket notation: <li v-for=”index in 6” :key=”index”> <div class=”input-fld”> <div class=”field”> <p class=”control has-icons-right”> <input type=”text” v-model=”formData[0][‘line_‘ + index + ‘_text’]“/> </p> </div> </div> # [Vue.js] How to clear the select option on click to (x) button in Vue.js? How do I create a function or button for a clear select option field? I try with <input type=”reset” value=”x” /> but when I clear one field, all fields are cleared. I’m not sure if you need my code with basic select fields? I accept in any way ### Solution : It can be solved manually using event handlers. Do: <input value=”x” @click=”clearOneField” /> And in the methods hook inside script, implement the method: clearOneField() { this.field = null; } ### Solution 2: Let’s take this example. You could do it using v-model: <script src=”https://unpkg.com/vue"></script> <div id=”app”> <p>{ message }</p> <select v-model=”select”> <option value=””>None</option> <option value=”1”>1</option> <option value=”2”>2</option> <option value=”3”>3</option> </select> <button v-on:click=”clear”>x</button> </div> <script> new Vue({ el: ‘#app’, data: { selectvalue: ‘’ } }) </script> # [Vue.js] docker multistage build fails on vue.js This is my dockerFile located at vDocker/Dockerfile # build stage FROM node:lts-alpine as build-stage WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build # production stage FROM nginx:stable-alpine as production-stage RUN apk add –no-cache bash COPY ./vDocker/nginx.conf /etc/nginx/conf.d/default.conf COPY –from=build-stage /app/dist /usr/share/nginx/html EXPOSE 80 443 CMD [“nginx”, “-g”, “daemon off;”] I also have docker-compose located at root directory. version: ‘3’ services: web_client: build: context: . dockerfile: ./vDocker/Dockerfile container_name: web_client restart: unless-stopped tty: true volumes: - /var/www/app/ssl/certbot/conf:/etc/letsencrypt - /var/www/app/ssl/certbot/www:/var/www/certbot ports: - 80:80 - 443:443 After running docker-compose build, It gives me the following error: Service ‘web_client’ failed to build: COPY failed: stat /var/lib/docker/overlay2/67b326c995a1ce52fb3ee2a792d84ffe9bc403aa5962755a2b89f1ab925a1242/merged/app/dist: no such file or directory Any idea why? ### Solution : You don’t need to name the second stage. How the build looks like depends on how you set it up and I don’t know it. But what you can do is: run the first stage as a separate Dockerfile after the last RUN add RUN ls -lart -> this should print the contents of the directory and you can check if the /app/dist really exists For the rest the code looks good. # [Vue.js] Multiple Vue instances bind to parent & child elements I would like to ask for best setup of vue.js instances (components), when I do not want use SPA. My HTML looks like: <html> <div id=”layout”> <div>Some Layout based content…</div> <div id=”homepage”> <simple-form-component></simple-form-component> </div> </div> <script type=text/javascript src=”homepage.js”></script> <script type=text/javascript src=”layout.js”></script> </html> Currently there is simple example ot two .js files: layout.js homepage.js // layout.js import vue.js from ‘vue/dist/vue.js’ new Vue({ el: ‘#layout’, }); // homepage.js import vue.js from ‘vue/dist/vue.js’; import SimpleForm from ‘../../../../components/SimpleForm.vue’; new Vue({ el: ‘#homepage’, components: { SimpleForm, }, }); It seems to work fine, but when suspicious that this is not 100% correct, due to console error: [vue.js warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option. (found in ) Do you have any ideas/experience how to setup my scenario correctly? PS: I would like to have my JS split into different files, managed by webpack and distributed by backend. Thank you, Mario ### Solution : I’ve found workaround v-pre, my HTML will change the line: <div id=”homepage” v-pre>. One small issue is, that I will not see my components in vue.js Devtools. # [Vue.js] sticky nav bar showing in all views how to make responsive sticky navbar working in desktop using uikit here is what there is tried <link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel=”stylesheet” /> <div uk-sticky=”sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #transparent-sticky-navbar” style=”background-color: rgba(0,0,0,.4)”> <nav class=”uk-navbar-container uk-navbar-transparent uk-height-match” uk-navbar style=”position: relative; z-index: 980;height: 77px;”> <div class=”uk-navbar-center”> <ul class=”uk-navbar-nav”> <li class=”uk-active”><a href=”#”>Active</a></li> <li> <a href=”#”>Parent</a> <div class=”uk-navbar-dropdown”> <ul class=”uk-nav uk-navbar-dropdown-nav”> <li class=”uk-active”><a href=”#”>Active</a></li> <li><a href=”#”>Item</a></li> <li><a href=”#”>Item</a></li> </ul> </div> </li> <li><a href=”#”>Item</a></li> </ul> </div> </nav> </div> the navbar is working on all display views but i don’t want it to work on tablet & mobile view how can i achieve that ? ### Solution : You can make a listener for window resize and when the window width is as a mobile size, hide the navbar, I made it once like this in the parent component : data: function() { return { windowWidth: 0, } }, mounted() { this.$nextTick(function() {
//Init
this.getWindowWidth()
})
},
methods: {
getWindowWidth(event) {
this.windowWidth = document.documentElement.clientWidth;
},
},
beforeDestroy() {
window.removeEventListener(‘resize’, this.getWindowWidth);
}

And in the template for example (pseudo code):

<template>
<navbar v-if=”windowWidth > 800px”></navbar>
</template>

Hope it helps

# [Vue.js] How to extend span-method for different tables

I dynamically generate a group of cards. And each card will generate a group of tables. Each table will have different row span effect. I wrote the code below, Obviously, all tables will call the same method objectSpanMethod. to extend span-method to add a param to tell different table. How?

<el-card v-for=”(f, i) in arrangedflightInDay” :key=”f.id” :name=”f.name” class=”box-card” >
<div class=”clearfix”>
<el-table
:data=”arrangedPlanInDay[i].content”
:span-method=”objectSpanMethod”
@selection-change=”selectionRecords”>
<el-table-column type=”selection” width=”40”> </el-table-column>
</el-table>
</div>
</el-card>

### Solution :

You could use bind:

:span-method=”objectSpanMethod.bind(null, param)”

From the docs: “The next simplest use of bind() is to make a function with pre-specified initial arguments”.

bind creates a new “wrapper” function that executes objectSpanMethod, and will pass it parameters. The first argument to bind, null, specifies the object context, and this will not be passed to the inner function. You can see more about how this works in the docs.

The second argument to bind (and all subsequent arguments) will be passed to the wrapped function. In this case, the wrapped function objectSpanMethod will receive 1 argument: param.

# [Vue.js] What is the advantage of using beforeEach function in Jest

when learning Jest with this manual. What is the advantage of using beforeEach function in Jest?

to detect action dispatching. I think two of the following codes will have the same behaviour.

describe(‘dispatch actions’, () => {
const localvue.js = createLocalVue()
localVue.use(Vuex)

let actions = { increment: jest.fn(), decrement: jest.fn() }
let store = new Vuex.Store({ state: {}, actions })

const wrapper = shallowMount(Counter, { store, localvue.js })

it(‘dispatches “increment” when plus button is pressed’, () => {
wrapper.find(‘button#plus-btn’).trigger(‘click’)
expect(actions.increment).toHaveBeenCalled()
})

it(‘dispatches “decrement” when minus button is pressed’, () => {
wrapper.find(‘button#minus-btn’).trigger(‘click’)
expect(actions.decrement).toHaveBeenCalled()
})
})

describe(‘dispatch actions’, () => {
const localvue.js = createLocalVue()
localVue.use(Vuex)

let actions
let store

beforeEach(() => {
actions = {
increment: jest.fn(),
decrement: jest.fn()
}
store = new Vuex.Store({
state: {},
actions
})
})

it(‘dispatches “increment” when plus button is pressed’, () => {
const wrapper = shallowMount(Counter, { store, localvue.js })
wrapper.find(‘button#plus-btn’).trigger(‘click’)
expect(actions.increment).toHaveBeenCalled()
})

it(‘dispatches “decrement” when minus button is pressed’, () => {
const wrapper = shallowMount(Counter, { store, localvue.js })
wrapper.find(‘button#minus-btn’).trigger(‘click’)
expect(actions.decrement).toHaveBeenCalled()
})
})

### Solution :

No these example do not have the same behaviour. As you can find in the documentation of Jest (https://jestjs.io/docs/en/setup-teardown) the beforeEach method is executed before each test method.

So in the first example, you only create the action and store once, and the changes made in the first test method (increment) are still available during the second test. In the second example, the action and store are recreated for each test. So the changes made in the first test method are not available in the second test method.

Most of the time the second approach is prefered because of independent tests with no shared state is a good practice.

### Solution 2:

As has already been mentioned, beforeEach gets called before each test.

The other important advantage to using beforeAll and beforeEach is that you can pass them either a function that returns a Promise or an async function and Jest will wait for the resulting Promise to resolve before continuing.

So beforeAll and beforeEach must be used for any asynchronous setup work:

describe(‘something’, () => {

let setInBeforeAll, setinBeforeEach;

beforeAll(() => {
return returnsAPromise().then(val => { // <= you can return a Promise…
setInBeforeAll = val;
});
});

beforeEach(async () => { // …or use an async function
setInBeforeEach = await alsoReturnsAPromise();
});

it(‘should do something’, () => {
// both setInBeforeAll and setInBeforeEach are available here
});
});

# [Vue.js] Nuxt app runs on development environment but gives Cannot GET / on production

I’m trying to deploy a Nuxt app.

The app is already working on development environment. But when trying to deploy it to production as explained here, either on my computer or in the cloud by running npm run build && npm start I’m getting Cannot GET / from the server.

there is already tried to run node server/index.js and run the server file on .nuxt/dist with no success.

What I’m missing?

Why is it working with npm run dev but not with npm run build && npm run start?

### Solution :

Maybe version problems: https://nuxtjs.org/guide/release-notes/

await nuxt.ready() must be called in ^2.5 versions. It helped me out.