@huichao/vue-components

Vue components for vue & nuxt.

more components are coming soon.

1. w-scroll-to-top

# defaults: offset = 100px
# at bottom right
<w-scroll-to-top></w-scroll-to-top>

# 1. change the offset from top
# 2. add custom css classes to `cssCls`
<w-scroll-to-top offset="200" cssCls="fixed bottom-10 right-10 z-10"></w-scroll-to-top>

# user slot, put your code inside the tag.

<w-scroll-to-top>
  <span>Top</span>
</w-scroll-to-top>

<w-scroll-to-top>
  <img src="/myimage.svg" width="10px" height="10px">
</w-scroll-to-top>

2. w-lang-switcher

nuxt-i18n installed and configed.

  modules: [
    'nuxt-i18n',
    '@nuxtjs/gtm',
  ],
  i18n: {
    locales: [
      {
        code: 'en',
        iso: 'en-US',
        name: 'Eng',
        file: 'en.json',
      },
      {
        code: 'ch',
        iso: 'zh-CN',
        name: '中文',
        file: 'ch.json',
      },
      {
        code: 'ind',
        iso: 'id-ID',
        name: 'BH',
        file: 'ind.json',
      },
    ],
    defaultLocale: 'en',
    lazy: true,
    langDir: 'lang/',
    baseUrl: 'https://domain',
    detectBrowserLanguage: {
      onlyOnRoot: true,
      redirectOn: 'root',
    },
    seo: true,

  }

<w-lang-switcher :label="$t('global.lang')"/>

add css classes.
<w-lang-switcher :label="$t('global.lang')"
    css-wrapper="flex items-center space-x-4 text-black" 
    css-languages="flex items-center space-x-4 divide-x divide-white"
    css-lang-active="text-bold underline"
/>