link1507 link1508 link1509 link1510 link1511 link1512 link1513 link1514 link1515 link1516 link1517 link1518 link1519 link1520 link1521 link1522 link1523 link1524 link1525 link1526 link1527 link1528 link1529 link1530 link1531 link1532 link1533 link1534 link1535 link1536 link1537 link1538 link1539 link1540 link1541 link1542 link1543 link1544 link1545 link1546 link1547 link1548 link1549 link1550 link1551 link1552 link1553 link1554 link1555 link1556 link1557 link1558 link1559 link1560 link1561 link1562 link1563 link1564 link1565 link1566 link1567 link1568 link1569 link1570 link1571 link1572 link1573 link1574 link1575 link1576 link1577 link1578 link1579 link1580 link1581 link1582 link1583 link1584 link1585 link1586 link1587 link1588 link1589 link1590 link1591 link1592 link1593 link1594 link1595 link1596 link1597 link1598 link1599 link1600 link1601 link1602 link1603 link1604 link1605 link1606 link1607 link1608 link1609 link1610 link1611 link1612 link1613 link1614 link1615 link1616 link1617 link1618 link1619 link1620 link1621 link1622 link1623 link1624 link1625 link1626 link1627 link1628 link1629 link1630 link1631 link1632 link1633 link1634 link1635 link1636 link1637 link1638 link1639 link1640 link1641 link1642 link1643

[Vue.js] Can't use Vue.js Data in Created ()

I’m wondering if is it possible, how can I use Vue.js data in my Created() function.

I’ll show some code so you can see why I say.

data (){

return {
model: {},
foo: ‘boo’

}

},

created (){

const getModel = () => {
const modelId = this.$route.params.id
axios.get(‘/api/model’, { params: {modelId: modelId})
.then(res => {
this.model = res.data
this.boo = ‘hello’

console.log(this.model)
console.log(this.foo)
})
.catch(err => console.log(err))
}

getModel()

const init = () =>{
console.log(this.model)
console.log(this.foo)
}

init()

The first console.log(foo) returns ‘hello’.
The second one (init) returns ‘boo’.

Also the first console.log(this.model) is what I expect to get but once is out of the axios method it’s like empty again all over the mounted function.

I’ve tried a lot of things but none of them worked, hope I get a solution… Thanks in advance!

Solution :

As soon as JS functions are non-blocking - the axios call isn’t done (model is still empty) when you call for init

Define init as components method
Call this.init() in axios.get callback

Solution 2:

It might have to do with the fact that in the created hook you’re creating a function using the function keyword, which means the init function will have its own context(its own this).

A solution to this problem would be to use an arrow function.

data () { return { foo: ‘bar’ } }
created () {
const init = () => {
console.log(this.foo);
}
init(); // bar
}

More about arrow functions

UPDATE

Actually, the issue stems from not awaiting for getModel. Because you are making a request, you first need to wait for the promise to resolve, and then use its resolved data in the code that depends on it.

The async/await version would be:

async created () {
const getModel = async () => {
const modelId = this.$route.params.id
try {
const res = await axios.get(‘/api/model’, { params: {modelId: modelId})

this.model = res.data
this.boo = ‘hello’
console.log(this.model)
console.log(this.foo)
} catch (err) {
console.error(err)
}

}

const init = () =>{
console.log(this.model)
console.log(this.foo)
}

// An async function always returns a promise
await getModel();
init();
}

[Vue.js] Vue-CLI 3 check file exists by path file?Thanks.

[My directory structure]

MyProject
public
| rar
| myFile.zip
| other.zip
| …
node_modules
src
test

to check file exists in public/rar/myFile.zip

[My Code try]

import fs from “fs”;

export default {
name: “home”,
methods: {
isFileExists() {
if (fs.existsSync(“../rar/myFile.zip”)) {
console.log(“file found”);
} else {
console.log(“sorry, file not found”);
},
},
};

above code i try using fs but not working

Please help. I need some code for fix it.

Thanks.

Solution :

You can check if the file exists by making http request. You can use either ajax or axios. Axios is way faster.

[Vue.js] Vuejs Accessing Data in Modal Component Using Props

There are very similar questions to the one am asking but the solutions proposed don’t my situation.
when trying to access data from a parent list in a different component using a Modal component in vue.
there is tried passing the prop value in the loop as well as the used component in the parent view but receive no data.

This is the parent template.

<template>
<table class=”table table-bordered table-stripped” v-if=”users.length>0”>
<caption>List of Contacts</caption>
<thead>
<tr>
<th scope=”col”>#</th>
<th scope=”col”>Name</th>
<th scope=”col”>Action</th>
</tr>
</thead>
<tbody>
<tr v-for=”(user, index) in users” :key=”user.id”>
<td>{index+1}</td>
<td>{user.name}</td>
<td>
<button type=”button” class=”btn btn-success btn-sm” @click=”initEdit(user)” :euser=”user”>Edit</button>
</td>
</tr>
</tbody>
</table>
<edit-user v-if=”showEditUser” :showEditUser.sync=”showEdit”></edit-user>
</template>

<script>
import editUser from ‘@/components/editUser.vue’;
export default {
name: ‘listusers’,
components: {
‘edit-user’: editUser,
},
data() {
return {
user: [],
users: [],
euser: {},
showEdit: false,
};
},
methods: {
initEdit() {
this.showEditUser = true;
},
},
};
</script>

And this is the modal component.

<template>
<transition name=”modal” role=”dialog”>
<div class=”modal” style=”display: block”>
<div class=”modal-dialog” role=”document”>
<div class=”modal-content”>
<div class=”modal-header”>
<h5 class=”modal-title”>Edit Contact</h5>
</div>
<div class=”modal-body”>
<p>{euser}</p>
<p>{euser.id}</p>
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-default” @click=”closeModal”>Close</button>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>

export default {
name: ‘editUser’,
props: {
euser: {
type: Object,
},
showEdit: {
‘default’ : false,
}
},
data() {
return {
edit_user: [],
};
},
methods: {
closeModal(){
this.$emit(‘update:showEdit’);
},
},
};
</script>

there is tried passing the prop value in the loop as shown above as well as in the component shown below.

<edit-user v-if=”showEditUser” :showEditUser.sync=”showEdit” :euser=”user”></edit-user>

How can I get a single user from the parent to display in the modal ?

Solution :

In the parent component you can create a data property called “currUser:null” and on “initUser” method you can do the following:

initEdit(user){
this.currUser=user;
this.showEditUser = true;
}

then the modal component definition will look like the following:

<edit-user v-if=”showEditUser” :showEditUser.sync=”showEdit” :euser=”currUser”>
</edit-user>

Solution 2:

First, you must pass the euser prop to the <edit-user/> component not the button that will call the edit.

Second, the initEdit() function should look more like this

initEdit(user) {
this.user = user
this.showEditUser = true
}

Third, if you plan on editing the user within the modal you will likely need to create a copy of the user within the child component.

watch: {
showEditUser() {
this.editableUser = JSON.parse(JSON.stringify(this.euser))
}
}

then all of the v-models on the child should point to this.editableUser.
when the user goes to save the edit you can emit a new function that could pass the new version back out to the parent like so

saveEdit() {
this.$emit(‘save’, this.editableUser)
}

you would just need to catch the save in the <edit-user /> component like so

<edit-user v-show=”showEditUser” :showEditUSer.sync=”showEdit” :euser=”user” @save=”saveUser” />

//script…data…methods
saveUser(user) {
let ind = this.users.map(u => u.id).indexOf(user.id)
if(ind != -1) {
Object.assign(this.users[ind], user) //put user back where it belongs with new data
}
}

Solution 3:

Just passing the user like this:

<edit-user v-if=”showEditUser” :showEditUser.sync=”showEdit” :euser=”user[indexOfUser]“></edit-user>

And change the prop properties to receive an object an not an Array

euser: {
type: Object,
},

Just try to add in the main component data to user just for testing if the ‘undefined’ problem comes from there. and in the :euser=”user[0]“

user: [{
id: 1
}]

[Vue.js] How to retrive the data from a nasted JSON FireBase Database using Vue.js?

there is one problem and cannot retrive the data from my FireBase database using Vue.js.

to retrive specific field message and timestamp.
Moreover, name and email of userModel.
By knowing that, I believe I could figure it out how to retrive other too.

there is done successfull with simple database.

But, after I tried to do it on my real database with nasted code using v-for and keys, it was unsuccessfull because I do not know the exact code to write inside the <script> tag.

Moreover, I believe this can be done with a loop, foreach and then have to concatenate to get the correct data from the field in JSON tree like the stated below?

Knowing the FireBase config, all is good setup. I can login to my call it “Dashboard”.
On the dashboard, I would like to only get and display the data in the HTML <table> tag.

My JSON looks like this:

{
“chatmodel” : {
“-LeZnCBPC7FvqMeIfw_Y” : {
“file” : {
“name_file” : “some_file.jpg”,
“size_file” : “5332138”,
“type” : “img”,
“url_file” : “https://firebasestorage.googleapis.com/v0/b/xmnovimarof.appspot.com/o/images%2F2019-05-11\_045028camera.jpg\_camera?alt=media&token=5e13c9be-b6a5-43cb-a4ed-725148d8d3de"
},
“message” : “”,
“timeStamp” : “1557543050279”,
“userModel” : {
“email” : “user@gmail.com“,
“id” : “pQe9H83cxDd8hFu6bFzzt7M5YT12”,
“name” : “First Last Name”,
“phoneNumber” : “+385123456789”,
“photo_profile” : “https://lh4.googleusercontent.com/-Tf1LtwPEmHI/AAAAAAAAAAI/AAAAAAAANnw/fEXJ05bKSPc/s96-c/photo.jpg"
}
},
“-LeZnGUXcNhSYzZeGJWk” : {
“mapModel” : {
“latitude” : “46.31”,
“longitude” : “16.33”
},
“timeStamp” : “1557543067886”,
“userModel” : {
“email” : “user@gmail.com“,
“id” : “pQe9H83cxDd8hFu6bFzzt7M5YT12”,
“name” : “First Last Name”,
“phoneNumber” : “+385123456789”,
“photo_profile” : “https://lh4.googleusercontent.com/-Tf1LtwPEmHI/AAAAAAAAAAI/AAAAAAAANnw/fEXJ05bKSPc/s96-c/photo.jpg"
}
},
“-LeZnNJL27r5NHB8gYzt” : {
“message” : “This is a text test message.”,
“timeStamp” : “1557543095843”,
“userModel” : {
“email” : “user@gmail.com“,
“id” : “pQe9H83cxDd8hFu6bFzzt7M5YT12”,
“name” : “First Last Name”,
“phoneNumber” : “+385123456789”,
“photo_profile” : “https://lh4.googleusercontent.com/-Tf1LtwPEmHI/AAAAAAAAAAI/AAAAAAAANnw/fEXJ05bKSPc/s96-c/photo.jpg"
}
}
}
}

when a bit of confused which code should I use inside my <template> and <script> tag.

I only need to get the data from this kind database (it has more items like that). I do not need to edit or delete it.

Thank you for any advance and provided help.

Solution :

One common way is to fetch the database in the created hook of the component, see https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

You will find below the code for a simple example based on a standard Vue.js set-up. Update the firebaseConfig.js file with yoru own project configuration.

main.js

import vue.js from “vue”;
import App from “./App.vue”;

Vue.config.productionTip = false;

new Vue({
render: h => h(App)
}).$mount(“#app”);

App.vue

<template>
<div id=”app”>
<HelloWorld/>
</div>
</template>

<script>
import HelloWorld from “./components/HelloWorld”;

export default {
name: “App”,
components: {
HelloWorld
}
};
</script>

<style>

#app {
font-family: “Avenir”, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
}
</style>

components/HelloWorld.vue

<template>
<div class=”hello”>
<div v-if=”chatItems.length”>
<div v-for=”ci in chatItems”>
<h4>{ ci.messageDate }</h4>
<p>{ ci.userName } - { ci.messageText}</p>
<hr>
</div>
</div>
<div v-else>
<p>There are currently no posts</p>
</div>
</div>
</template>

<script>
import { db } from “../firebaseConfig.js”;
export default {
name: “HelloWorld”,
data() {
return {
chatItems: []
};
},
created() {
db.ref(“chatmodel”)
.once(“value”)
.then(dataSnapshot => {
const itemsArray = [];
dataSnapshot.forEach(childSnapshot => {
const childData = childSnapshot.val();
itemsArray.push({
messageText: childData.message,
userName: childData.userModel.name,
messageDate: childData.timeStamp
});
});
this.chatItems = itemsArray;
});
}
};
</script>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

firebaseConfig.js

import firebase from “firebase”;

// the web app’s Firebase configuration
var firebaseConfig = {
apiKey: “xxxxxxx”,
authDomain: “xxxxxxx”,
databaseURL: “xxxxxxx”,
projectId: “xxxxxxx”,
storageBucket: “xxxxxxx”,
messagingSenderId: “xxxxxxx”,
appId: “xxxxxxx”
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const db = firebase.database();

export { db };

[Vue.js] Avoid mutating a prop directly, code works in vue1, but vue2 i get warn

i found in internet below code which works nice, but i get a varn Avoid mutating a prop directly.. for value and value_t. I already tried to put both in data or in computed, but it doesn’t work really good. Have anybody a good idea how to solve this problem?
thanks in advance.

/***
* vue.js Component: Rating
*/
Vue.component(‘star-rating’, {
props: {
‘name’: String,
‘value’: null,
‘value_t’: null,
‘id’: String,
‘disabled’: Boolean,
‘required’: Boolean
},

template: ‘<div class=”star-rating”>\
<label class=”star-rating__star” v-for=”rating in ratings” :class=”{\‘is-selected\‘: ((value >= rating) && value != null), \‘is-hover\‘: ((value_t >= rating) && value_t != null), \‘is-disabled\‘: disabled}” v-on:click=”set(rating)” v-on:mouseover=”star_over(rating)” v-on:mouseout=”star_out”>\
<input class=”star-rating star-rating__checkbox” type=”radio” :value=”rating” :name=”name” v-model=”value” :disabled=”disabled”><i class=”fas fa-star”></i></label></div>’,

/*
* Initial state of the component’s data.
*/
data: function() {
return {
temp_value: null,
ratings: [1, 2, 3, 4, 5]
};
},

methods: {
/*
* Behaviour of the stars on mouseover.
*/
star_over: function (index) {
var self = this;

if (!this.disabled) {
this.temp_value = this.value_t;
return this.value_t = index;
}
},

/*
* Behaviour of the stars on mouseout.
*/
star_out: function() {
var self = this;

if (!this.disabled) {
return this.value_t = this.temp_value;
}
},

/*
* Set the rating of the score
*/
set: function set(value) {
var self = this;

if (!this.disabled) {
// Make some call to a Laravel API using Vue.Resource
this.temp_value = value;
return this.value = value;
}
}
}
});

Solution :

A prop should be read only. The good practice, when you wanna write on a prop, is to store it’s value in a variable in data and then use that variable.

Here, I can see that the prop value is used as a v-model in the <input> and the prop value_t is written in the start_over and start_out methods.

You should instead do :

data: function() {
return {
temp_value: null,
ratings: [1, 2, 3, 4, 5],

// Props that I wanna write on (name them the way you want)
// — and then use those in the component
_value: this.value
_value_t: this.value_t
};
},

And replace all the references to value and value_t with _value and _value_t like so :

/***
* vue.js Component: Rating
*/
Vue.component(‘star-rating’, {
props: {
‘name’: String,
‘value’: null,
‘value_t’: null,
‘id’: String,
‘disabled’: Boolean,
‘required’: Boolean
},

template: ‘<div class=”star-rating”>\
<label class=”star-rating__star” v-for=”rating in ratings” :class=”{\‘is-selected\‘: ((_value >= rating) && _value != null), \‘is-hover\‘: ((_value_t >= rating) && _value_t != null), \‘is-disabled\‘: disabled}” v-on:click=”set(rating)” v-on:mouseover=”star_over(rating)” v-on:mouseout=”star_out”>\
<input class=”star-rating star-rating__checkbox” type=”radio” :value=”rating” :name=”name” v-model=”_value” :disabled=”disabled”><i class=”fas fa-star”></i></label></div>’,

/*
* Initial state of the component’s data.
*/
data: function() {
return {
temp_value: null,
ratings: [1, 2, 3, 4, 5],

// Props that I wanna write on (name them the way you want)
// — and then use those in the component
_value: this.value
_value_t: this.value_t
};
},

methods: {
/*
* Behaviour of the stars on mouseover.
*/
star_over: function (index) {
var self = this;

if (!this.disabled) {
this.temp_value = this._value_t;
return this._value_t = index;
}
},

/*
* Behaviour of the stars on mouseout.
*/
star_out: function() {
var self = this;

if (!this.disabled) {
return this._value_t = this.temp_value;
}
},

/*
* Set the rating of the score
*/
set: function set(value) {
var self = this;

if (!this.disabled) {
// Make some call to a Laravel API using Vue.Resource
this.temp_value = _value;
return this._value = _value;
}
}
}
});

[Vue.js] How to deploy a Laravel-Vue project on shared server (GoDaddy)

This is the first time when developing a Laravel vue.js app. When I use php artisan serve, everything works fine. But when I load it with http://localhost/myProject/public, assets are not loaded. My images are in img directory inside public folder. I was using blade templating to manage this issue when I use Laravel alone. But now I can’t use blade since it is a vue.js component. How can I run the project without php artisan serve? My Ultimate aim is to deploy the project in godaddy shared server. Please help me.

Solution :

Debug the application using ‘php artisan serve’ while you develop from the local machine.

When you publish it into godaddy,
compress the project folder (say ‘my_project’) and upload the zip file (‘my_project.zip’) to ‘public_html’ directory in godaddy.

unzip the folder.

Now the directory structure will be ‘public_html/my_project…’

you will have a ‘public’ directory inside ‘my_project’.
Now create a subdomain which points to the ‘public’ directory.

That’s it. Now load the subdomain.
The assets and api’s will work perfectly.

Solution 2:

just rungit clone [your_project_address] in the www folder and then run ‘php artisan migrate’, of course, you should have configured well.

Solution 3:

@ThasheelApps this is the solution to access api’s.

Create a .htaccess file in root folder and paste the following code there:

<IfModule mod_rewrite.c>
Options +FollowSymLinks -Indexes
RewriteEngine On

RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>

This issue occurs many times due index.php in url. if you try the api endpoint including index.php, it will work perfectly. to prevent this issue we need to follow above soution htaccess

[Vue.js] How do I exclude a directory from my webpack build with vue-cli-3 setup

I just spent 3 hours putting this line:
exclude: [‘./src/assets/sass’]
in 20 different places. Please tell me where this should go?
Here is my current setup for the css-loader (util.js):

‘use strict’
const path = require(‘path’)
const config = require(‘../config’)
const ExtractTextPlugin = require(‘extract-text-webpack-plugin’)
const packageConfig = require(‘../package.json’)

exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === ‘production’
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory

return path.posix.join(assetsSubDirectory, _path)
}

exports.cssLoaders = function (options) {
options = options || {}

const cssLoader = {
loader: ‘css-loader’,
options: {
sourceMap: options.sourceMap
}
}

const postcssLoader = {
loader: ‘postcss-loader’,
options: {
sourceMap: options.sourceMap
}
}

// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

if (loader) {
loaders.push({
loader: loader + ‘-loader’,
// exclude: [‘./src/assets/sass’],
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: ‘vue-style-loader’
})
} else {
return [‘vue-style-loader’].concat(loaders)
}
}

// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders(‘less’),
sass: generateLoaders(‘sass’, { indentedSyntax: true }),
scss: generateLoaders(‘sass’),
stylus: generateLoaders(‘stylus’),
styl: generateLoaders(‘stylus’)
}
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)

for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp(‘\\.’ + extension + ‘$’),
exclude: [‘./src/assets/sass’],
use: loader
})
}

return output
}

exports.createNotifierCallback = () => {
const notifier = require(‘node-notifier’)

return (severity, errors) => {
if (severity !== ‘error’) return

const error = errors[0]
const filename = error.file && error.file.split(‘!’).pop()

notifier.notify({
title: packageConfig.name,
message: severity + ‘: ‘ + error.name,
subtitle: filename || ‘’,
icon: path.join(__dirname, ‘logo.png’)
})
}
}

Here is what my base webpack file looks like:

‘use strict’
const path = require(‘path’)
const utils = require(‘./utils’)
const config = require(‘../config’)
const vueLoaderConfig = require(‘./vue-loader.conf’)

function resolve (dir) {
return path.join(__dirname, ‘..’, dir)
}

module.exports = {
context: path.resolve(__dirname, ‘../‘),
entry: {
app: [‘babel-polyfill’,’./src/main.js’]
},
output: {
path: config.build.assetsRoot,
filename: ‘[name].js’,
publicPath: process.env.NODE_ENV === ‘production’
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: [‘.js’, ‘.vue’, ‘.json’],
alias: {
‘vue$’: ‘vue/dist/vue.esm.js’,
‘@’: resolve(‘src’),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: ‘vue-loader’,
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: ‘babel-loader’,
include: [resolve(‘src’), resolve(‘test’), resolve(‘node_modules/webpack-dev-server/client’)],
},
// {
// test: /\.scss$/,
// exclude: [‘./src/assets/sass’]
// },
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: ‘url-loader’,
options: {
limit: 10000,
name: utils.assetsPath(‘img/[name].[hash:7].[ext]‘)
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: ‘url-loader’,
options: {
limit: 10000,
name: utils.assetsPath(‘media/[name].[hash:7].[ext]‘)
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: ‘url-loader’,
options: {
limit: 10000,
name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]‘)
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it’s native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: ‘empty’,
fs: ‘empty’,
net: ‘empty’,
tls: ‘empty’,
child_process: ‘empty’
}
}

Here is the vue-webpack file:

‘use strict’
const utils = require(‘./utils’)
const config = require(‘../config’)
const isProduction = process.env.NODE_ENV === ‘production’
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap

module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: [‘src’, ‘poster’],
source: ‘src’,
img: ‘src’,
image: ‘xlink:href’
}
}

Presumably this line should go in one of these files unfortunately it is not preventing webpack from attempting to build it (and therefore failing to do so)

Solution :

Turns out after much experimentation that if I removed this line from the first snippet:
scss: generateLoaders(‘sass’),
The reason seems to be that even though the files in this directory are never used in my project, the loader attempts to load them because of the file name, so by not having a loader it does not attempt that and no other errors are thrown since the file is not used.
Presumably if one wanted to keep the loader and exclude a specific directory then you would need to put in a condition on this section in the first snippet:

for (const extension in loaders) {
const loader = loaders[extension]
//enter the condition here, i.e. if(loader === something) then push an object
// with “exclude”
output.push({
test: new RegExp(‘\\.’ + extension + ‘$’),
exclude: [‘./src/assets/sass’],
use: loader
})
}

[Vue.js] Add Line Break to Title Attribute in Vue JS Template

I’m trying to set a title attribute on an <a> in a vue.js JS template that has line breaks in it. I’ve tried all of the following with no success:

\n


An actual line break in the code

How do I make the vue.js JS template parser recognize a line break? I’m using Chrome 74 on a Mac.

Solution :

<a v-bind:title=”‘Gday\nWorld’”>Hello World</a>

or if you’re ok with a really ugly template:

<a title=”Gday
World”>Hello World</a>

(any indenting will be added to the second line in the tooltip)

[Vue.js] Vue template to render function generation

there is a vue.js template in a gwt app (vuegwt-plugin).
My Problem is I use a third party lib from vuejs ecosystem and my template uses this plugin. generate render function based from this template.
there is used this online generator: https://vuejs-tips.github.io/compile.

This generator outputs functions like this:

_c(
‘span’, [
_v(
_s(
entry
.name
)
)
]
)
]) : _e(),
_l((

I assume _c is the createElement parameter to render(createElement) function.

But what is _v(), _s() , _e() etc. ?

Solution :

the link points to a 404, but from what I can tell those functions are vue.js internal methods defined here and here which are not really meant for public usage.

You may also check the component flow types.

[Vue.js] Vue SPA - PhantomJS works successfully, but Fetch As Google shows blank

My team has built a SPA using vue.js (https://tutorismhk.com/).
When working on the SEO, we find that Fetch As Google failed to render the page (showing blank page in the preview). There is no error message shown.

We have tested with PhantomJS v2.1.1 - using it to render the above URL from our local machine and snap the screen into an image. It just worked well.

Any idea about how we can debug it?

Solution :

We found a workaround after some trial and error. There are two problems for our application.

We manually installed the latest babel-polyfill. I guess it causes some incompatible problem.
It seems like after upgrading @vue/cli-plugin-babel to v3.4.0, it starts to have some problem with other dependencies we have (in our case, vue-izitoast v1.1.2).

After uninstalling babel-polyfill and downgrading @vue/cli-plugin-babel to v3.3.0, Fetch As Google succeeds rendering our page.