link2192 link2193 link2194 link2195 link2196 link2197 link2198 link2199 link2200 link2201 link2202 link2203 link2204 link2205 link2206 link2207 link2208 link2209 link2210 link2211 link2212 link2213 link2214 link2215 link2216 link2217 link2218 link2219 link2220 link2221 link2222 link2223 link2224 link2225 link2226 link2227 link2228 link2229 link2230 link2231 link2232 link2233 link2234 link2235 link2236 link2237 link2238 link2239 link2240 link2241 link2242 link2243 link2244 link2245 link2246 link2247 link2248 link2249 link2250 link2251 link2252 link2253 link2254 link2255 link2256 link2257 link2258 link2259 link2260 link2261 link2262 link2263 link2264 link2265 link2266 link2267 link2268 link2269 link2270 link2271 link2272 link2273 link2274 link2275 link2276 link2277 link2278 link2279 link2280 link2281 link2282 link2283 link2284 link2285 link2286 link2287 link2288 link2289 link2290 link2291 link2292 link2293 link2294 link2295 link2296 link2297 link2298 link2299 link2300 link2301 link2302 link2303 link2304 link2305 link2306 link2307 link2308 link2309 link2310 link2311 link2312 link2313 link2314 link2315 link2316 link2317 link2318 link2319 link2320 link2321 link2322 link2323 link2324 link2325 link2326 link2327 link2328

[Vue.js] How to use SVG like content loader in NativeScript Vue? Subscribe to RSS

I using NativeScript vue.js and wanted to show a loading animation in my components like the https://github.com/egoist/vue-content-loader.

The vue-content-loader package unfortunately don’t work for NativeScript, because it uses SVG elements which are not supported in the views.

<template>
<content-loader
:height=”160”
:width=”400”
:speed=”2”
primaryColor=”#f3f3f3”
secondaryColor=”#ecebeb”
\>
<rect x=”70” y=”15” rx=”4” ry=”4” width=”117” height=”6.4” />
<rect x=”70” y=”35” rx=”3” ry=”3” width=”85” height=”6.4” />
<rect x=”0” y=”80” rx=”3” ry=”3” width=”350” height=”6.4” />
<rect x=”0” y=”100” rx=”3” ry=”3” width=”380” height=”6.4” />
<rect x=”0” y=”120” rx=”3” ry=”3” width=”201” height=”6.4” />
<circle cx=”30” cy=”30” r=”30” />
</content-loader>
</template>

<script>
import { ContentLoader } from “vue-content-loader”

export default {
components: {
ContentLoader
}
}
</script>

[vue.js warn]: Unknown custom element: <svg> - did you register the component correctly? For recursive components, make sure to provide the “name” option.
found in
-–> <Home>
<Page>
<App> at components/App.vue

Are there any alternatives to vue-content-loader to get a similar animation? Or is there a way to run the vue-content-loader package inside NativeScript Vue?

Solution :

Understanding the architecture (NativeScript !== Cordova / PhoneGap):

Cordova / PhoneGap hosts the web app inside a WebView, all the UI components are just the same HTML DOM Elements.

NativeScript allows the to reuse the web development skills (JavaScript / XML / CSS) to build native mobile app. All the UI components are just same as native, as if you are building an app with Objective C / Java.

The JavaScript runtime allows you to execute any code that is browser independent (CommonJS). You will not have access browser dependent objects like HTML DOM / Canvas / SVG / Document / Window etc., Therefore you can not use vue-content-loader in NativeScript which heavily depends on SVG.

What you are looking for:

I believe you are looking for Skeleton view, unfortunately there is no ready made plugin available. But you could write one / simply use the relevant native library in the project.

SkeletonView for iOS
SkeletonView for Android

Refer the plugin docs for more info.

There is also a blog post explaining how you could do this in NativeScript with Angular, you may translate it into Vue.

[Vue.js] What is the relationship between App.vue and index.html? Subscribe to RSS

I created an application scaffold using vue-cli. There is no clear explanation (AFAICT) that shows the relationship between the generated files: App.vue.js and index.html.

It seems from the resulting pages that index.html contains the HTML generated from App.vue. However, both of the above named files have HTML with a div element having id=”app”. What is the purpose of each of these files? and why do they both have an element with the same ID, since an element ID is supposed to be a unique identifier in a document?

/public/index.html

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0”>
<link rel=”icon” href=”<%= BASE_URL %>favicon.ico”>
<title>sample</title>
</head>
<body>
<noscript>
<strong>We’re sorry but sample doesn’t work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id=”app”></div>
<!– built files will be auto injected –>
</body>
</html>

/src/App.vue

<template>
<div id=”app”>
<div id=”nav”>
<router-link to=”/“>Home</router-link> |
<router-link to=”/about”>About</router-link>
</div>
<router-view/>
</div>
</template>

<style>

#app {
font-family: ‘Avenir’, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}

#nav {
padding: 30px;
}

#nav a {
font-weight: bold;
color: #2c3e50;
}

#nav a.router-link-exact-active {
color: #42b983;
}
</style>

Solution :

This

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

renders App component to #app DOM element, i.e. replaces <div id=”app”></div> that is specified in index.html with App rendered template.

It could be <div id=”app”></div> in index.html and <div id=”rendered-app”></div> in App.vue.js <template>. That both index.html and App.vue.js contain <div id=”app”></div> isn’t a requirement but this makes sense because original div is replaced and it’s guaranteed there’s only one element with app id.

[Vue.js] Show class if input invalid not( empty) in vue.js Subscribe to RSS

how to add a has-error class if input :invalid:not(:empty) in vue.js?

<div class=”form-group”>
<input type=”email” id=”loginEmail” name=”loginEmail” v-model=”loginEmail” required>
<label for=”loginEmail”>email</label>
<div class=”icon form”>
<icon name=”email”></icon>
</div>
</div>

I tried this:

<div class=”form-group”>
<input type=”email” id=”loginEmail” name=”loginEmail” v-model=”loginEmail” required>
<label for=”loginEmail”>email</label>
<div class=”icon form” v-bind:class=”loginEmail.checkValidity ? ‘has-success’ : ‘has-error’”>
<icon name=”email”></icon>
</div>
</div>

Vue

var app = new Vue({
el: ‘#app’,
data: {
loginEmail: ‘’
}
})

This solution shows a class, but when I change anything in the input, no reflesh. This has-error class is here permanent.

SOLVED

input:not(:valid):not(:placeholder-shown) + label + .icon.form {
svg {
stroke: red;
}
}

The solution was so embarrassingly simple. I’m ashamed not to think of it. Finally, it was resolved by CSS without using vue.js

Solution :

To add a style class dynamically you need to pass it as object

Note Object key get added as class to element if the respective value is true

<div :class = { ‘has-error’:loginEmail.checkValidity , ‘has-success’: true } >

Reference to Official vue.js docs - https://vuejs.org/v2/guide/class-and-style.html

Solution 2:

You need to write something like

computed: {
checkProperty: function () {
if(checkValidity === true) return true;
return false;
}
}

then in the html you can write

<div :class = { ‘has-error’:!checkProperty , ‘has-success’: checkProperty} >

[Vue.js] How should I handle authentication with Vue.js and users each owning a collection in MongoDB? Subscribe to RSS

When a user will use my application, they should have to login, and then have access to the application whose information is pulled from a MongoDB collection with all of their entries. Each user would have a collection, probably with their userID as the name of the collection.

If anyone is familiar with Habitica, that is pretty close to what when trying to do.

when using Vue.js, Express, MongoDB… Axios is used to create the CRUD requests, I believe. The only thing there is tried is looking up different ways of doing authentication, but I would like some guidance on where to start- as when I started learning full-stack development, I switched stacks a few different times before finding one that fit my needs (or what I thought I needed.)

I don’t know my problem or what specific code I would need to post to get the right type of answers. As I get answers, I can post specific code.

Solution :

Each user would have a collection, probably with their userID as the name of the collection.

While it is possible to dynamically create a new collection for each user, I would not recommend doing this because any collection-specific settings (like indexes) would have to be duplicated and kept up to date across all collections. Instead, I would create a single collection, use a property like userId to store which user a document belongs to, and speed up database queries by creating an index on that property.

If you’re not familiar with indexes, they’re basically a way of saying “I’ll often query based on this property, please note down the values of this property separately so they can be accessed more quickly”.

The only thing there is tried is looking up different ways of doing authentication, but I would like some guidance on where to start

An approach that is fairly popular with this kind of stack is using JSON Web Tokens. Here’s a quick overview of how you would implement these in the application:

Come up with a sort of password to securely sign the tokens. This can be a string of random characters. Store it somewhere the Express application can read it from (for example a .env file). This is the key.
When a user logs in from the Vue.js front-end, a request is sent to the Express back-end to validate the username and password (make sure to store passwords securely with something like bcrypt). If the credentials are correct, you can create an object containing the user ID and additional information you might want to use on the front-end (e.g. { id: ‘myuserid’, name: ‘John Doe’ }). You can then create a token with the object as the payload and the key and return it in the response to the request.
The front-end can now store the token as a cookie or in localStorage and from then on attach it to every request through a header. Since you’re planning to use Axios, this is how you’d do that:

axios.defaults.headers.common[‘Authorization’] = ‘Bearer ‘ + token

When you now make a request, the Express back-end can simply get the token from the header, verify it, and extract the payload we’ve previously created. Since the token was signed using the key, you can trust what’s in the payload and use it to, for example, get user-specific data by passing payload.id to a database query. This kind of logic is usually done in a middleware so all the application routes don’t have to worry about how the authentication works.

[Vue.js] Accessing screen width in vue components Subscribe to RSS

Currently when storing the window.innerWidth value to a vuex getter called screenWidth and using it in all of my components. But the problem is every time to use it there is to 1) import { mapGetters } from ‘vuex’ 2) call …mapGetters() inside the computed property. To get rid of this problem I thought prototype injection might be a good idea. So I did this:

Vue.prototype.$screenWidth = window.innerWidth;
window.addEventListener(‘resize’, () => {
Vue.prototype.$screenWidth = window.innerWidth;
});

But that doesn’t work. How can I more easily access the screen width in my component without going through all the import/map stuff?

Solution :

The way you’re already doing it with Vuex sounds fine to me.

If you’re using this in a lot of components then perhaps an alternative might be to use an observable object on the prototype, as in the example below. By using an object we can retain the reactivity.

Vue.prototype.$screen = Vue.observable({
width: window.innerWidth,
height: window.innerHeight
});

window.addEventListener(‘resize’, () => {
Vue.prototype.$screen.width = window.innerWidth;
Vue.prototype.$screen.height = window.innerHeight;
});

new Vue({
el: ‘#app’
});
<script src=”https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id=”app”>
<p>Width: { $screen.width }</p>
<p>Height: { $screen.height }</p>
</div>

This relies on Vue.observable, which needs vue.js 2.6.0. In earlier versions of vue.js you could do something similar by creating a temporary vue.js instance and assigning the object to the data of that instance:

Vue.prototype.$screen = new Vue({
data: {
screen: {
width: window.innerWidth,
height: window.innerHeight
}
}
}).screen;

window.addEventListener(‘resize’, () => {
Vue.prototype.$screen.width = window.innerWidth;
Vue.prototype.$screen.height = window.innerHeight;
});

new Vue({
el: ‘#app’
});
<script src=”https://unpkg.com/vue@2.5.22/dist/vue.js"></script>
<div id=”app”>
<p>Width: { $screen.width }</p>
<p>Height: { $screen.height }</p>
</div>

It looks horrific but that’s why Vue.observable was introduced.

Note that SO wraps these snippets in an iframe so you may not see the numbers update when you resize the browser window. For me I either had to make the window quite narrow or click the Expand snippet link to see it working.

[Vue.js] Table not showing the data from database in laravel vue component Subscribe to RSS

For the past few days, there is been following a tutorial about vue.js application from a really good youtuber. I was following each and every step as it was mentioned in the tutorial when suddenly there is come to an abrupt halt. This is because the data from my database is not showing up in the frontend. The database does show that when storing the data properly, and there are no errors whatsoever.
The video where I got stuck on is: https://youtu.be/bUXhGw4aQtA

Here is the code for the index in my controller

public function index()
{
return User::latest()->paginate(10);
}

Here is the app.js

/**
* First we will load all of this project’s JavaScript dependencies which
* includes vue.js and other libraries. It is a great starting point when
* building robust, powerful web applications using vue.js and Laravel.
*/

require(‘./bootstrap’);

window.vue.js = require(‘vue’);
import {
Form,
HasError,
AlertError
} from ‘vform’

window.Form = Form;
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)

import VueRouter from ‘vue-router’
Vue.use(VueRouter)

let routes = [{
path: ‘/dashboard’,
component: require(‘./components/Dashboard.vue’).default
},
{
path: ‘/profile’,
component: require(‘./components/Profile.vue’).default
},
{
path: ‘/users’,
component: require(‘./components/Users.vue’).default
}
]

const router = new VueRouter({
mode: ‘history’,
routes // short for `routes: routes`
})

/**
* The following block of code may be used to automatically register your
* vue.js components. It will recursively scan this directory for the Vue
* components and automatically register them with their “basename”.
*
* Eg. ./components/ExampleComponent.vue.js -> <example-component></example-component>
*/

// const files = require.context(‘./‘, true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split(‘/‘).pop().split(‘.’)[0], files(key).default));

Vue.component(‘example-component’, require(‘./components/ExampleComponent.vue’).default);

/**
* Next, we will create a fresh vue.js application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit the unique needs.
*/

const app = new Vue({
el: ‘#app’,
router
});
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div class=”container”>
<div class=”row mt-5”>
<div class=”col-md-12”>
<div class=”card”>
<div class=”card-header”>
<h3 class=”card-title”>Users Table</h3>

<div class=”card-tools”>
<button class=”btn btn-success” data-toggle=”modal” data-target=”#addNew”>Add new <i class=”fas fa-user-plus”></i></button>
</div>
</div>
<!– /.card-header –>
<div class=”card-body table-responsive p-0”>
<table class=”table table-hover”>
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Type</th>
<th>Registered At</th>
<th>Modify</th>
</tr>

<tr v-for=”user in users.data” :key=”user.id”>

<td>{user.id}</td>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.type | upText}</td>
<td>{user.created_at | myDate}</td>

<td>
<a href=”#” >
<i class=”fa fa-edit blue”></i>
</a>
/
<a href=”#”>
<i class=”fa fa-trash red”></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!– /.card –>
</div>
</div>
<!– Modal –>
<div class=”modal fade” id=”addNew” tabindex=”-1” role=”dialog” aria-labelledby=”addNewLabel” aria-hidden=”true”>
<div class=”modal-dialog” role=”document”>
<div class=”modal-content”>
<div class=”modal-header”>
<h5 class=”modal-title” id=”addNewLabel”>Add Users</h5>
<button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”>
<span aria-hidden=”true”>×</span>
</button>
</div>
<form @submit.prevent=”createUser”>
<div class=”modal-body”>
<div class=”form-group”>
<input v-model=”form.name” type=”text” name=”name”
placeholder=”Name”
class=”form-control” :class=”{ ‘is-invalid’: form.errors.has(‘name’) }”>
<has-error :form=”form” field=”name”></has-error>
</div>

<div class=”form-group”>
<input v-model=”form.email” type=”text” name=”email”
placeholder=”email”
class=”form-control” :class=”{ ‘is-invalid’: form.errors.has(‘email’) }”>
<has-error :form=”form” field=”email”></has-error>
</div>

<div class=”form-group”>
<textarea v-model=”form.bio” type=”text” name=”bio”
placeholder=”Bio”
class=”form-control” :class=”{ ‘is-invalid’: form.errors.has(‘bio’) }”></textarea>
<has-error :form=”form” field=”bio”></has-error>
</div>

<div class=”form-group”>
<select v-model=”form.type” type=”text” name=”type”
class=”form-control” :class=”{ ‘is-invalid’: form.errors.has(‘type’) }”>
<option value=””>Select user Role</option>
<option value=”user”>Employee</option>
<option value=”manager”>Manager</option>
</select>
<has-error :form=”form” field=”name”></has-error>
</div>

<div class=”form-group”>
<input v-model=”form.password” type=”password” name=”password”
placeholder=”password”
class=”form-control” :class=”{ ‘is-invalid’: form.errors.has(‘password’) }”>
<has-error :form=”form” field=”password”></has-error>
</div>
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button>
<button type=”submit” class=”btn btn-primary”>Create</button>
</div>

</form>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
data() {
return {
users: {},
form: new Form({
name: ‘’,
email: ‘’,
password: ‘’,
type: ‘’,
bio: ‘’,
photo: ‘’,
})
}
},
methods: {
loadUsers() {
axios.get(“api/user”).then(({
data
}) => (this.user = data));
},
createUser() {
this.form.post(‘api/user’);
}
},
created() {
this.loadUsers();
}
}
</script>

Please let me know if any other code is required for me to elaborate on the query that there is here. there is tried all options that I could think of and search and couldn’t get it to work. Hopefully, another set of eyes can help me figure out the problem.

I expect a full table showing all the rows from my database, and the front-end shows nothing. (Note: I did check the network tab in the developer’s options in Chrome and there was only a single xhr type and it showed status 200).

Solution :

You need to return the data as json. You can use Laravel [Resource]
(https://laravel.com/docs/5.8/eloquent-resources)

Create user resource

php artisan make:resource User

User Controller

use App\Http\Resources\User as UserResource;

On the Method

$user = User::latest()->paginate(10);
return UserResource::collection($user)

Solution 2:

I suggest you go on youtube to search for laravel/vue.js tutorials, there are tons of good resources there that can help you.
For what you are trying to achieve, if you have mounted the component well and can see a dummy test in the component on the browser, then you are half way done.
Inside the mounted hook of the vue.js component, make an api call to the backend (laravel) to fetch users like so;

axios.get(‘/get_all_users’).then((res)=>{
this.users = res.data
//do a console.log(res.data) to ensure you are getting the users collection
}).catch((err) => {
console.log(err)
});

Inside the data object, create an empty array that holds the users like so;

data(){
return{
users: []
}
}

Now, inside the web.php, create a GET route for this api call;

ROUTE::get(‘/get_all_users’, ‘UsersController@FetchUsers’);

Note that the controller and method necessarily not be named as above, create a controller, and inside, write a method to fetch users and use them here asap;
Inside the controller, write the method;

public function FetchUsers(){
$users = User::latest()->get();
return response()->json($users, 200);
}

Also note that you will need to import the User model at the top of the controller file like so;

use App\User;

Also ensure before now that you have the User model created that relates to the users table;
By now you should see the arrays of users on the browser developer tool console if everything is fine.
Then in the template, iterate through the users data like so;

<tr v-for=”user in users” :key=”user.id”>
<td>{ user.id } </td>
<td>{ user.name } </td>
<td>{ user.email } </td>
<td>{ user.created_at } </td>
</tr>

I will be glad to help in case you need further clarifications.

[Vue.js] Vue vuex state watch is not working on first load Subscribe to RSS

there is below code to get new ID using watch. Its working fine. However, I need the function to get the ID on first load as well, which is not working. Is there anything when missing in my code?

watch: {
id: {
immediate: true,
handler(newV, oldV) {
this.id = newV;
},
},

},
mounted () {
store.watch(store.getters.getId, id => {
this.id = id;
});
},
created() {
this.userID();
},
methods: {
userID () {
console.log(‘this.id);
}
}
}

Solution :

You can just do this:

data() {
return {id: null}
}
watch: {
‘$store.getters.getId’: {
immediate: true,
handler: function(newV) {
this.id = newV
},
},
}

Using a computed property is better, as the component does not ‘own the id’.

computed: {
id() {
return this.$store.getters.getId
},
},

[Vue.js] How do I make Typescript recognize my custom global filter? Subscribe to RSS

I created a custom global Vue.js filter to format markdown syntax. That works well but typescript (or my IDE of choice PhpStorm) doesn’t recognize the ‘markdown’ filter from within my component’s template. It doesn’t throw an error but I get no intellisense. Is there any way that I can drop some definition file somewhere so that I get intellisense?

Solution :

What you’re looking for is module augmentation. Specifically, in vue, they have an example of augmenting types for use with plugins.

However, the same principle applies to what you’re doing here, so you would make a file — say, vue-shim.d.ts, that looked something like this:

import vue.js from ‘vue’
import MarkdownFilterTyping from ‘wherever’

declare module ‘vue/types/vue’ {
interface vue.js {
filterMarkdown: MarkdownFilterTyping
}
}

And now the ide should recognize that vue.js has this method globally bound

[Vue.js] Register module runtime vs transpile time Subscribe to RSS

I just want to confirm my understanding of Vuex store module registration.

My understanding is that

const store = {
modules: {
mod1,
mod2,
mod3,

}
}

export default store

registers the module during transpile time, when .vue.js and other webpack stuff is happening, whereas

store.registerModule(‘mod1’, mod1)
store.registerModule(‘mod2’, mod2)
store.registerModule(‘mod3’, mod3)

happens at runtime when the code actually gets to the client, making the frontend ever so slightly slower.

Am I correct in my understanding?

Solution :

I think yes.
Register a module before the store has been created

const store = {
modules: {
mod1,
mod2,
mod3,

}
}

export default store

Dynamic Module Registration

You can register a module after the store has been created with the store.registerModule method.

I recommend to you read the official documentation for more information on this link.