DEV Community: David

How to use PortalVue

David — Tue, 15 Sep 2020 15:04:32 +0000

There some many times in the development of an app that it's required to change the behaviour of a component. Nowadays, frameworks provide some many ways to overlap those components and one it's surprised me was a small package that will be included in VueJS 3, and today is named portals.

Play to open a portal

Yes, if you have a little gamer culture you hear about portals and it reminds you about Valve. We can say that this works that way.

PortalVue is an actual VueJS 2 plugin that let us send some components from a template to another template.

How to use portals

To install PortalVue, we only have to write on our bash:

yarn add portal-vue

Then, we must add the following lines to our main.js

import PortalVue from 'portal-vue'
Vue.use(PortalVue)

How to send components through portals

Ok, in our project we had troubles. We need to override the AppBar depending on the view. We are coding an Ionic app and we didn't want to use so many code for that.

In our project layout view, we set up our destination portal. This is the portal used to show the content.

<PortalTarget name="header" tag="ion-header"></PortalTarget>

We are setting a name what is the reference to send the content in the other side of the portal.

When we need to show an AppBar, we only have to define it in the view and customize it.

<Portal to="header">
    <ion-toolbar></ion-toolbar>
</Portal>

How you can see, it is very simple to use. According to the author, it will be available in Vue.js 3 as core functionality and renamed as <Teleport />

I hope it is useful 😁

Which e2e testing framework can I use to test a Cordova hybrid app?

David — Thu, 02 Jul 2020 08:36:50 +0000

Hello, we have an app with Cordova + Ionic + Vue and we are testing with Appium + Wdio, but we are having issues and we're considering to test another framework.

Wich do you know to test a Cordova app?

Some many ways to ignore file changes in Git

David — Sat, 01 Feb 2020 10:17:36 +0000

When you are working with your team, sometimes you need to ignore files. If a change that involve all the team, you can add the ignored file to the .gitignore file of your repo.

This way you have to save a new commit and all the team have to pull the changes, but you can use three more ways.

One of them is creating a .gitignore.local, but you also have to add it to the .gitignore and creating a new commit.

If you are nos interested in save a commit, you can ignore files locally, saving the ignored file in the global git configuration:

git config --global core.excludesfile ignored_file

...or you can use a file created in your git repository called .git/info/exclude. This file is basically a gitignore but the changes in it are not reflected in the stash.

What did you learn this week?

David — Sat, 01 Feb 2020 10:07:30 +0000

For example, I've learnt that a green test written in the past might be a false positive test today.