I created a project with Vue.js and Vuetify using the vue.js CLI. I would like to host this application with Github Pages. So I took a guide from here

https://help.github.com/en/articles/configuring-a-publishing-source-for-github-pages#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch

and when not using the history moute of the vue.js Router (https://router.vuejs.org/guide/essentials/history-mode.html) to make sure I don’t need a server.

I created a build of my project and renamed the generated dist folder to docs. This docs folder is placed in the root directory (where it was generated). When I select master branch /docs folder as my Github Pages publishing source I get a blank white page.

When I check the console I get a

Failed to load resource: the server responded with a status of 404 ()

for each file generated in the dist/docs folder. What am I missing?

Solution :

This could be that the root path of the app is set to look at the root of the github instead of the root of the repository.

It also looks like you are using vue-cli-3 from the tags. So here is what there is done for deploying a vue.js app to be hosted on github pages.

Create a vue.config.js file in the root of the app.
In that file, set the public path to match the repository name.

module.exports = {
publicPath: process.env.NODE_ENV === ‘production’ ? ‘/YOUR_REPO_NAME/‘ : ‘/‘
}

Create a deploy.sh file in the root of the app.
In the file, write the following

set -e

npm run build

cd dist

git init
git add -A
git commit -m ‘deploy’

git push -f git@github.com:YOUR_USER_NAME/REPOSITORY_NAME.git master:gh-pages

cd -

Now from the command line, in the root of the app, you can run sh deploy.sh. This will run the build command for vue-cli, go into the dist folder, commit those files and push them to the gh-pages branch.
Then you can set the github repo to use gh-pages instead of docs. Since you mentioned you are not using history mode for vue-router, you should see the # in the URL string and it will work when a user refreshed the page on a different route other than home.

Hope that helps point you in the right direction for deploying and hosting the vue.js app on github pages.

I use vue.js Js 2.6, and have made this component:

Vue.component(‘confirmmodal’, {
template: ‘’,
data: function () {
return {
showModal: false,
title: ‘’,
text: ‘’,
confirmMethod: null,
dismissMethod: null,
compiledTemplate: null
};
},
methods: {
initTemplate: function (result) {
this.compiledTemplate = Vue.compile(result); //called from created
return;
},
show: function (t) {
this.showModal = true;
},
ok: function () {
this.showModal = false;
if (this.confirmMethod) {
this.confirmMethod();
}
},
cancel: function () {
this.showModal = false;
if (this.dismissMethod) {
this.dismissMethod();
}
}
},
render: function (createElement) {
if (this.compiledTemplate) {
return this.compiledTemplate.render.call(this, createElement);
}
},
created: function () {
site.apiGetHtml(“/home/ConfirmModal/“, null, this.initTemplate, null, null);
modalhandle.$on(‘toggleConfirm’, content => {
this.title = content.title;
this.text = content.text.replace(‘’, ‘<br />’);
this.confirmMethod = content.confirm;
this.dismissMethod = content.dismiss;
//this.$root.$options.components.confirmmodal.options.methods.show(content);
this.show();
});
}
});

Maybee its a bad way to implement it, but in my ASP.NET projects, there is made som partial views, loaded in the site.apiGetHtml function, compiled into the component, when it is created. And it works fine.

The component works fine in Chrome and other browsers supporting ES6. But our customer requires supporting IE11 - and there the problem comes, as IE11 not supports lambda-expression:

content => {
this.title = content.title;
this.text = content.text.replace(‘’, ‘<br />’);
this.confirmMethod = content.confirm;
this.dismissMethod = content.dismiss;
this.show();
}

When I convert the lambda-expression into a function, the ‘this’ variable can not find the show-function in the component (even not in Chrome).
As you can see, there is tried to call the show function - through the this.$root.components scope, but it looks like I dont get the component initialized. Nothing happens.

Solution :

Try having assigning this to a variable so that it’s context is not lost in function:

let self = this;
function(content) {
self.title = content.title;
self.text = content.text.replace(‘’, ‘<br />’);
self.confirmMethod = content.confirm;
self.dismissMethod = content.dismiss;
self.show();
}

when using the v-calendar plugin to create a datepicker on the frontend. How can i change the position/alignment of the popover of the v-date-picker component? (While keeping all other elements centered aswell, and while only using CDN imports)

when trying to build a frontend using Vue.js, v-calendar, Bootstrap (and Chart.js for some graphs). All these libraries/frameworks/plugins were imported into the project by using CDN links for now. I tried using the popoverAlign property, which was mentioned on the v-calendar GitHub page. It may be important to add, that when using text-align: center; on the body to center all the elements on the page, but it seems like the popover does not get centered aswell.

This is the code i tried using:

Vue.use(VCalendar, {
popoverAlign: “bottom”,
})

But i received the errror message Uncaught ReferenceError: VCalendar is not defined, which was maybe caused because i use the libraries only through CDN links and did not install them otherwise.

I expected the popover to appear right under the input element of the datepicker. It actually appeared under it, but shifted to the left.
Like this:
actual result

I also tried recreating the issue in a JSFiddle, but the problem did not appear there. when clueless, as i don’t know what is causing this weird alignment of the popover.

Solution :

To center align the popover on the input all you need is popover-align=”center” on the <v-date-picker> element:

Vue.config.productionTip = false;
Vue.config.devtools = false;

const vue.js = new Vue({
el: “#app”,
data: () => ({
selectedDate: {
start: new Date(),
end: new Date()
}
})
})
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src=”https://unpkg.com/v-calendar@0.9.7/lib/v-calendar.min.js"></script>

<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel=”stylesheet” />
<link href=”https://unpkg.com/v-calendar/lib/v-calendar.min.css" rel=”stylesheet” />

<div class=”container” id=”app”>
<div class=”row”>
<div class=”col-12”>
<h1>
Example
</h1>
</div>
</div>
<div class=”row”>
<div class=”col-6”>
Other stuff here
</div>
<div>
<v-date-picker :max-date=’new Date()’
mode=’range’
v-model=”selectedDate”
popover-align=”center”>
</v-date-picker>
</div>
</div>
</div>

I given link in href tags. but it is not working as it is present in App.vue.js file.How to navigate from App.vue.js file using href??

<div v-if=”city!=null”>
<f7-page>
<center>
<a
style=”position:absolute;top:10px;right:10px;z-
index:99;color:#242424;background-color:#FFFFFF;padding:4px 12px; border-
radius:40px”
@click=”save”
\>Skip</a>
<f7-block style=”margin:0px”>
<div style=”color:gray;font-size: 14px;”>Ready to Explore Local World ! </div>
<div>
<a
href=”/signup/“
style=”background-color:#273657;margin: 20px 10px 10px
10px”
class=”button button-fill button-big”
\><b>Join Free</b></a>
</div>
<div style=”color:gray;font-size: 14px;”>Have an account?<span>
<f7-link
style=”color:green;padding:5px”
href=”/login/“
\>Login</f7-link>
</span>
</div>
</f7-block>
</center>
</f7-page>
</div>

Solution :

Assuimg you are using the Vue-Router, you should use the router-link component in order to navigate to another route. See https://router.vuejs.org/api/ for more information.

Basically, the router does not work on the server-side (so no HTTP calls get fired when clicking links), but on the client-side. When you click a router-link everything that changes is handled by the vue.js app (javascript).

when trying to dynamically create/remove a vue.js component. there is figured out how to dynamically add the component, but when having some troubles with allowing the users to remove the specific component.

Consider below two vue.js files:

TableControls.vue

<a v-on:click=”addColumn”>Add Column</a>

<script>
export default {
methods: {
addColumn: function () {
Event.$emit(‘column-was-added’)
}
}
};

</script>

DocumentViewer.vue:

<div v-for=”count in columns”>
<VueDragResize :id=”count”>
<a @click=”removeColumn(count)”>Remove Column</a>
</VueDragResize>
</div>

<script>
import VueDragResize from ‘vue-drag-resize’;

export default {
components: {
VueDragResize
},
data() {
return {
columns: [1],
}

},
created() {
Event.$on(“column-was-added”, () => this.addColumn())
},

methods: {
addColumn: function () {
this.columns.push(this.columns.length + 1)
},
removeColumn: function (id) {
this.columns.splice(id, 1)
}
}
};
</script>

As you can see, whenever a user clicks on <a v-on:click=”addColumn”>Add Column</a>, it will submit an event, and the DocumentViewer.vue.js file will pick up it, firing the addColumn method. This will ultimately create a new <VueDragResize></VueDragResize> component.

This works great.

The problem is when to remove the component again. My removeColumn method simply removes an id from the columns array:

removeColumn: function (id) {
this.columns.splice(id, 1)
}

This results in that a column is in fact removed. However, consider below example. When user clicks on the remove icon for the first column, it will remove the 2nd column instead. (And when there is only one column present, it cannot be removed).

I believe this is due to the fact that I splice() the array, but I cannot see how else I can remove the component dynamically?

Solution :

I see, Array on vue.js does not re render when you modify them.

You need to use the

Vue.set(items, indexOfItem, newValue)

if you want to modify

and use

Vue.delete(target, indexOfObjectToDelete);

If you want to delete an item from an array

You may read the additional info here
https://vuejs.org/v2/api/#Vue-delete

If you want to delete an item from array. Using this will cause the component to rerender.

In this case it will be intuitive to do this

removeColumn: function (id) {
Vue.delete(this.columns, id)
}

Note that id should be the index. Vue.delete ensures the re-render of the component.

EDIT, you must use the index, instead of the count here.

<div v-for=”(count, index) in columns”>
<VueDragResize :id=”index”>
<a @click=”removeColumn(index)”>Remove Column</a>
</VueDragResize>
</div>

Solution 2:

I would recommend reshaping the data, each element should be an object with an id and whatever other properties you want. Not simply an id then you would need something like this:

removeColumn(id) {
const elToRemove = this.columns.findIndex(el => el.id === id)
let newArr = [elToRemove, …this.columns]
this.columns = newArr
}

Also make another computed property for columns like this to make sure they change dynamically (when you add/remove):

computed: {
dynColumns(){ return this.columns}
}

there is functions filterData that update a chart data based on several inputs. However, when an irrelevant input gets changed (like typing in a text-field), the functions get called every time, resulting the chart getting re-rendered. there is logged the output and none of the parameters changed.

Why does the function get called? Is there anyway to track it or am I doing it wrong.

<DeviceChart :input-data=”filterData(inputData, filters, otherParams)”/>

export default {
methods: {
filterData(inputData, inputFilters, otherParameters) {
console.log(‘Filter data has been called…’)
…
return result;
}
}
}

Solution :

First, a little bit of background.

A vue.js template will be compiled down to a render function. When a component renders this function is called and it returns a tree of VDOM nodes. These VDOM nodes describe the child components and the corresponding DOM. When a component subsequently updates this render function is called again, returning a new VDOM tree. vue.js then compares the old and new trees and decides what changes to make.

You can think of the render function as being very similar to a computed property. The return type, a tree of VDOM nodes, might be a bit alien to you but apart from that it’s just like any computed property you might write yourself. It runs, tracks dependencies and returns a value. If those dependencies subsequently change it will be run again.

Importantly, just like with a computed property, vue.js does not have detailed knowledge of precisely how you use the dependencies within that function. Any change to a dependency will cause the whole render function to be re-run.

This may sound expensive but usually it’s not a significant overhead. Comparing the trees of VDOM nodes is also usually quite a cheap operation. The expensive part is updating the DOM and you’d have to do that whatever approach you use.

So when you talk about an ‘irrelevant input’ changing you need to keep in mind that the template (i.e. render function) will always be run as a whole. If any dependency changes then all the code in the template will re-run.

In the case you have a method call to filter the value for input-data. That will be called every time the template runs. The input and chart may be separate components within the template but that doesn’t matter, the whole template needs to run to generate the new VDOM tree. The data behind the input is a dependency of the template and when it changes (as a result of typing into the input) the template re-runs.

However, child components won’t necessarily be re-rendered. When vue.js is comparing the VDOM trees for the parent component’s nodes it attempts to pair up children from the old and new trees (that’s what the key is for, to provide a hint about which children to pair up). Once it has paired up the children it will update the props for any children that need it. If the props of a child haven’t changed then that child won’t need to re-render itself.

In the case I’m assuming that input-data is an array. Each time the method filterData is called it’ll return a new array. The array might be ‘the same’ as far as you’re concerned but it isn’t actually the same array. From a JavaScript === perspective the value has changed. I don’t know precisely what DeviceChart does with that data but that is most likely what is causing it to re-render. For vue.js components re-rendering is a cheap process and not usually worth worrying about but chances are the chart is using some third-party libraries and re-rendering may not be so trivial.

The easiest solution is probably just to use a computed property for the input-data. As computed properties are cached you’ll get the same array every time the template runs. The cache is only invalidated if the dependencies of the computed function change, so other dependencies of the template won’t have any effect.

There are numerous alternatives, most of them painful. Generally these involve storing the filtered value in data and trying to update it just when required. I would not recommend trying anything like that if you can help it.

Computed properties get fiddly if you have a loop.

A viable alternative that also works well with a loop is to introduce a wrapper component for the chart. If you pass inputData, filters and otherParams to that wrapper component as 3 separate props then responsibility for performing the actual filtering can be moved into the wrapper component. So long as those 3 props don’t change the wrapper won’t be re-rendered when the outer template re-renders. I would still advise using a computed property within the wrapper but it wouldn’t matter so much as the template won’t be run anyway.

to show an error message if the user does not input anything in a search box, however when they start entering input the message goes. So far there is got the error message to display but the message does not disappear once the user starts entering the

new Vue({
el: “#app”,
name: “Hero”,
props: {
navLink: String
},
data: function() {
return {
title: “Simple Search”,
intro: “This is a simple hero unit, a simple jumbotron-style.”,
subintro: “It uses utility classes for typography and spacing to space content out.”,
result: [],
errors: [],
search: “”,
loading: “”
};
},

watch: {
search: function(val) {
if (!val) {
this.result = [];
}
}
},

methods: {
getData: function() {
this.loading = true;
fetch(`https://itunes.apple.com/search?term=${this.search}&entity=album\`)
.then(response => response.json())
.then(data => {
this.result = data.results;
this.loading = false;
console.log(data);
});
if (this.search) return true;
this.errors = [];
if (!this.search) this.errors.push(“Enter search field.”);
}
}
});
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<div id=”app”>
<template>
<div class=”jumbotron”>
<h1 class=”display-4”>{title}</h1>
<p class=”lead”>{intro}</p>
<hr class=”my-4”>
<p v-if=”errors.length”>
<b>Please correct the following error(s):</b>
</p>
<p v-for=”(error, index ) in errors” :key=”index”>{ error }</p>

<input class=”form-control form-control-lg mb-3” type=”search” placeholder=”Search”
aria-label=”Search” v-model=”search” required >

<div class=”loading” v-if=”loading”></div>

<table class=”table table-sm table-light table-bordered” v-if=”result.length”>
<thead class=”thead-dark”>
<tr class=”col-8”>
<th scope=”col”>Name</th>
<th scope=”col”>Artist</th>
</tr>
</thead>
<tbody>
<tr v-for=”(result, index) in result” :key=”index”>
<td>{result.collectionName}</td>
<td>{result.artistName}</td>
</tr>
</tbody>
</table>
<button
class=”btn btn-success btn-lg btn-block mb-3”
type=”submit”
v-on:click=”getData”
v-if=”result.length < 1”
\>Get data</button>
</div>
</template>
</div>

code. I’m sure it is something simple but I can’t see where? My code is:

Solution :

to show an error message if the user does not input anything in a search box, however when they start entering input the message goes.

Considering the problem -

You need two-way binding to fix this issue. No watching required !

new Vue({
el: “#app”,
data() {
return {
isValidationAllowed: false,
searchTerm: ‘’
}
},
computed: {
validated() {
return this.isValidationAllowed && !this.searchTerm
}
},
methods: {
validate() {
this.isValidationAllowed = true
}
}
})
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id=”app”>
<input type=”text” v-model=”searchTerm”>
<p v-if=”validated”>Hey You got the error</p>
<button @click=”validate”>Submit </button>
</div>

vue.js/Vuex beginner here. Is there a way to set the initial state in Vuex dynamically? there is a boolean state called is_here (true if a member is present), whose value to check dynamically with a conditional statement before setting.

If I try to compile the code like below, it returns this error: TS2564: Property ‘is_here’ has no initializer and is not definitely assigned in the constructor.

import { Action, Module, Mutation, VuexModule, getModule } from ‘vuex-module-decorators’;

export interface IMemberState {
is_here: boolean;
}

@Module({dynamic: true, store, name: ‘member’, namespaced: true})
class Member extends VuexModule implements IMemberState {
public is_here: boolean // The app expects me to set true or false here
}

If I set the default value for the initializer to true or false, the app compiles correctly. But if I change the status (let’s say from true to false) and refresh the page, the state reverts back to true (a different button is rendered based on this boolean, so I can see it’s reverted back to true).

public is_here: boolean = true

What to do is to make an API call and check certain things before setting the is_here state. I wrote an @Action that does the necessary checks.

@Action({})
public async setHereStatus() {
await axios.get(‘api/member_status’).then((response)=>
if(response.here_status) {
// This action returns true or false
)
}

I tried putting this @Action instead of hardcoding the value for is_here would work, but I got this error: TS2322: Type ‘() => Promise<boolean>’ is not assignable to type ‘boolean’.

public is_here: boolean = this.setHereStatus()

How can I assign this state dynamically in this kind of scenario? Am I supposed to use something like created or mounted?

[Update] As @ittus commented, I should’ve used a @Mutation to set the is_here status. I’ve been experimenting like this.

@Module({dynamic: true, store, name: ‘member’, namespaced: true})
class Member extends VuexModule implements IMemberState {
public is_here: boolean = false

@Mutation
public SET_HERE_STATUS(status: boolean): void {
this.is_here = status
}

@Action({})
public async setHereStatus() {
await axios.get(‘api/member_status’).then((response)=>
if(response.here_status) {
this.SET_HERE_STATUS(true)
}else {
this.SET_HERE_STATUS(false)
}
}

// In the vue.js component where I use this state
created () {
memberModule.setHereStatus()
}

However, the same issues persist; if I refresh the page, or close the window and access the same URL again, the state is reset. I don’t know if my created hook is functioning properly.

Solution :

You should call mutation to update vuex state.

Or you can combine mutation and action with MutationAction

@Module({dynamic: true, store, name: ‘member’, namespaced: true})
class Member extends VuexModule implements IMemberState {
public is_here: false
public is_here_loaded: false

@MutationAction({mutate: [‘is_here’, ‘is_here_loaded’]})
public async setHereStatus() {
const response = await axios.get(‘api/member_status’)
return {
is_here: response.here_status,
is_here_loaded: true
}
}
}

You can set a default value to false. If you need to wait for variable is_here to be set, you can use an additional flag to check. In the above code, I use is_here_loaded as the flag variable.

setHereStatus should be called when component created

The docs for Vue.js mention the smart auto-change-tracking for plain Javascript objects:

When you pass a plain JavaScript object to a vue.js instance as its data option, Vue.js will walk through all of its properties and convert them to getter/setters using Object.defineProperty.

Since Javascript’s Map and Set datatypes are designed to be used with their in-built get/set methods, how can I get vue.js to track calls (and therefore, changes) to the internal state of Maps and Sets?

Solution :

Vue.js does not support reactivity on Map and Set data types (yet?).

The feature ticket has some discussion and this work around (by user “inca”):

Sets and Maps are not observable by Vue. In order to use those
either in v-for, or in computed properties, methods, watchers,
template expressions, etc. you need to create a serializable replica
of this structure and expose it to Vue. Here’s a naive example which
uses a simple counter for providing vue.js with information that Set is
updated:

data() {
mySetChangeTracker: 1,
mySet: new Set(),
},

computed: {
mySetAsList() {
// By using `mySetChangeTracker` we tell vue.js that this property depends on it,
// so it gets re-evaluated whenever `mySetChangeTracker` changes
return this.mySetChangeTracker && Array.from(this.mySet);
},
},

methods: {
add(item) {
this.mySet.add(item);
// Trigger vue.js updates
this.mySetChangeTracker += 1;
}
}

This illustrates a kinda hacky but 100% working method for making
non-observable data reactive. Still, in real world cases I ended up
with serialized versions of Sets/Maps (e.g. you’d probably want to
store the modified versions of sets/maps in localstorage and thus
serialize them anyway), so no artificial counters/hacks were involved.

Solution 2:

As far as I know, Vue’s reactivity tracks assignations. If you perform an assignation on the set, it should track reactivity, for example:

methods: {
add(item) {
this.mySet = new Set(this.mySet.add(item));
}
}

This gives you a cleaner code, but with an obvious problem: performance.

Just pick the solution according to the needs :)

I need to import a library in my vue.js component, in the documentation I explain how to install it using npm (already do this step) but not how to import it into a vue.js component, this is the way in which it explains how to use the files:

<link href=”node_modules/webdatarocks/webdatarocks.min.css” rel=”stylesheet”/>
<script src=”node_modules/webdatarocks/webdatarocks.toolbar.min.js”></script>
<script src=”node_modules/webdatarocks/webdatarocks.js”></script>

and this is the way to instantiate the library:

<script>
var pivot = new WebDataRocks({
container: “#wdr-component”,
toolbar: true,
report: {
dataSource: {
filename: “https://cdn.webdatarocks.com/data/data.csv"
}
}
});
</script>

So what is the best way to call this in my component?

Solution :

This is a bit heavy.

The library is is not develop in module-like system, so the solution is make the js file imported as global.

A good library would be like const WebDataRocks = require(“WebDataRocks”); or with imports, but the library is made only for end-client.

First Part - Add the JS file to the global web client

To use WebDataRocks you have to get the global variable, to get the global variable you have to inyect, as common javascript on html but with webpack.

Here are a solution for this
Webpack - How to load non module scripts into global scope | window

You have to do this for webdatarocks.toolbar.min.js and webdatarocks.js

Second Part - Add the CSS

You have some options, the easy way i found to do this is use require in the <script> zone:

require(‘../node_modules/webdatarocks/webdatarocks.js’)

Good luck!

If something fails check the paths and let us know more information about it

Alternative solution (But worse)

If you are going to use this script in a internet system, you could insert the script and CSS in the HTML. For this do:

Open index.html
Add this code on the head section:

<link href=”https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel=”stylesheet”/>
<script src=”https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src=”https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

Rebuild

Extracted from WebDataRocks React Example

Important! this is unsafe

Make this only if you are sure about what this mean
If the webdatarocks CDN’s fails, the app will also fails.

Hope it helps :)