Vue Tips — DOM Elements, Vue Router, and Dynamic Components
Tags: vue, webdev, programming, javascript
Published: 2021-01-25 23:25:09

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


Vue.js is a popular framework for creating front end web apps.

In this article, we’ll look at some tips for writing better Vue.js apps.

### Open a Link in a New Tab with Vue Router

We can open a link in a new tab with Vue Router.

For instance, we can write:

```
const routeData = this.$router.resolve({ name: 'foo', query: { data: "bar" }});
window.open(routeData.href, '_blank');
```

We call the `this.$router.resolve` method to get the URL to open.

Then we call `window.open` to open the given URL.

The first argument is the URL.

`'_blank'` indicates that we open the URL in a new tab.

### Run Vue.js Dev Server with HTTPS

We can change the Vue dev server’s config to serve the project over HTTPS rather than HTTP.

To do that, we read the private key and certificate.

And we set the URL to serve the project on.

For instance, we can write:

```
const fs = require('fs')

module.exports = {
  devServer: {
    https: {
      key: fs.readFileSync('./certs/key.pem'),
      cert: fs.readFileSync('./certs/cert.pem'),
    },
    public: 'https://localhost:8888/'
  }
}
```

We read in the files and set them as the properties of the `https` property.

To make a certificate, we can use the `mkcert` program to do it.

We can install it on Windows, Mac OS, or Linux by following the instructions on [https://github.com/FiloSottile/mkcert](https://github.com/FiloSottile/mkcert).

Then we can create a new key and certificate by running:

```
mkcert -install
```

and:

```
mkcert example.com "*.example.com" example.test localhost 127.0.0.1 ::1
```

Then we created a certificate valid for localhost.

We just copy the files to the `cert` folder and rename them to match what we have in the config.

Then we can run `npm run dev` and serve the project.

### Rerun Vue Component mounted() Method

To rerun the code that we wrote in the `mounted` method, we can move the code into its own method.

Then we can call that in `mounted` or anywhere else.

For instance, we can write:

```
new Vue({
  methods: {
    init(){
      //...
    }
  },
  mounted(){
    this.init();
  }
})
```

Then we can write:

```
<button @click="init">reset</button>
```

We set the `init` method as the click handler and also run it in the `mounted` hook.

Now we can reuse it as we wish.

### Trigger Events Using Vue

We can set a ref on an element and then trigger the event on the element.

For instance, we can write:

```
<template>
  <button type="button" @click="onClick" ref="aButton">
    click me
  </button>
</template>

<script>
export default {
  methods: {
    onClick($event) {
      const elem = this.$refs.aButton.$el;
      elem.click();
    }
  }
}
</script>
```

We have a button that we assigned a ref to.

Then we get the button’s ref’s element in the `onClick` method.

It returns the DOM node for the button.

Then we call `click` to trigger a click on the button DOM node.

### Share a Method Between Components in Vue

To share a method between components in Vue, we can create a module that exports the method.

For instance, we can write:

`src/shared.js`

```
export default {
  bar() {
    alert("bar")
  }
}
```

Then we can use it in our component by writing:

`src/App.js`

```
<template>...</template>

<script>
import shared from './shared'

export default {
  created() {
    shared.bar();
  }
}
</script>
```

We imported the `shared` module and called the `bar` method inside it.

Alternatively, we can create a mixin, which is a piece of code that can be merged into our component.

For instance, we can write:

```
const cartMixin = {
  methods: {
    addToCart(product) {
      this.cart.push(product);
    }
  }
};
```

Then we can use it in our component by writing:

```
const Store = Vue.extend({
  template: '#app',
  mixins: [cartMixin],
  data(){
    return {
      cart: []
    }
  }
})
```

We call `Vue.extend` to create a subclass of the `Vue` constructor.

We can then make a new instance of `Store` and render that in our app.

### Pass a Component as Props and Use it in a Child Component in Vue

We can pass in the component’s tag name into the `is` prop of the `component` component.

For instance, we can write:

```
<template>
  <div>
    <component :is="childComponent">foo bar</component>
  </div>
</template>
```

`childComponent` is the string with the tag name of the component.

The stuff between the tags is the content that’s filled into the default slot.

### Conclusion

We can create a shared module or a mixin to create shared code in Vue.

Also, we can use `this.$router.resolve` to get the path that we can use elsewhere.

Vue projects can be served with HTTPS.

We can get the HTML element’s DOM object with refs.