titusdecali

<svg class="liquid-button"
  data-text="DIVE IN"
  data-hover-factor="-30"
></svg>

titusdecali

// Parent.vue
<template>
  <ChildComponent ref="child" />
</template>


// In Parent.vue's methods
this.$refs.child.methodName()

titusdecali

<template>
  <component-to-re-render :key="reloadMe" />
</template>

<script>
export default { 

  data() { 
    return { 

titusdecali

        v-for="(route, idx) in $router.options.routes.filter(
          (routeItem) => routeItem.name === $route.matched[0].name
        )"

titusdecali

// In parent 
data() {
  return {
    message: 'This is my message'
  }
}

// In child template
<div>{{ $parent.message }}</div> // <-- results in 'This is my message'

titusdecali

<template>
  <button
    :disabled="disabled"
    :type="type"
    class="btn"
    :class="[
      variant ? `btn-${variant}` : '',
      disabled ? disabled : ''
    ]"
    @click="!disabled ? $emit('clicked') : ''"

titusdecali

// import store from '../store' <-- To access your Vuex store
import Vue from 'vue' // <-- used for vue-toastification

class Utils {
  // Copy a string to user's clipboard
  copyToClipboard(text) {
    let copyText = document.createElement('input')
    document.body.appendChild(copyText)
    copyText.value = text
    copyText.select()

titusdecali

  async mounted() {
    // Detect if user is on Desktop or Mobile platform, then save to store
    this.$isMobile()
      ? this.$store.commit('setPlatform', 'mobile')
      : this.$store.commit('setPlatform', 'desktop')
  },

titusdecali

// In App.vue
watch: {
    $route() {
      window.scrollTo(0, 0)
    }
  },

titusdecali

import { createApp } from 'vue'
import App from './App.vue'

// i18n
import I18n from './i18n.js'

const i18n = createI18n({
  locale:
    localStorage.getItem('lang') ||
    // Detect user's browser language