Spytin Web

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

sweetalert

Guide: Vue Install.

npm install -S vue-sweetalert2

add main.js:

...

//sweetalert
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

too:

app.use(VueSweetalert2)

...

Tailwind

Guide: Tailwind Install.

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

File tailwind.config.js edit:

...
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
...

then file assets -> main.css: 

...
/*
 |--------------------------------------------------------------------------
 | Tailwind Directives
 |--------------------------------------------------------------------------
 |
 | Import TailwindCSS directives and swipe out at build-time with all of
 | the styles it generates based on your configured design system.
 |
 */ 
@tailwind base;
@tailwind components;
@tailwind utilities;
...

Animate

//Instalar
npm install animate.css --save


// Se creo una directive en la carpeta directive
// luego en el div:

...
 <div v-animate>
 ...
 </div>
...

i18n

Guide: I18n.

npm install vue-i18n@9 --save

Create the config file with name i18n.js


->>> START

import { nextTick } from 'vue';
import { createI18n } from 'vue-i18n';

let i18n;

export const SUPPORT_LOCALES = ['pt', 'en', 'es'];

export function setI18nLanguage(locale) {
  loadLocaleMessages(locale);

  if (i18n.mode === 'legacy') {
    i18n.global.locale = locale;
  } else {
    i18n.global.locale.value = locale;
  }

  document.querySelector('html').setAttribute('lang', locale);
  localStorage.setItem('lang', locale);
}

export async function loadLocaleMessages(locale) {
  // load locale messages with dynamic import
  const messages = await import(
    /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
  );

  // set locale and locale message
  i18n.global.setLocaleMessage(locale, messages.default);

  return nextTick();
}

export default function setupI18n() {
  if(!i18n) {
    let locale = localStorage.getItem('lang') || 'pt';

    i18n = createI18n({
      globalInjection: true,
      legacy: false,
      locale: locale,
      fallbackLocale: 'pt'
    });

    setI18nLanguage(locale);
  }
  return i18n;
}

->>> END





Add in the file main.js

...

import i18n from './i18n';


app.use(i18n())

....

Vuelidator

Guide: Install.

npm install @vuelidate/core @vuelidate/validators

VueGoodTablePlugin

Guide: Install.

npm install --save vue-good-table-next


- into app:

import VueGoodTablePlugin from 'vue-good-table-next';

// import the styles
import 'vue-good-table-next/dist/vue-good-table-next.css'

Vue.use(VueGoodTablePlugin);

Preloader:

<template>
    
    ...
    
    <Preloader v-if="loading" />
    
    ...

</template>




<script setup>
    ...

    //import 
    import Preloader from '@/components/preloader/Preloader.vue';

    //init
    const loading = ref(false);

    //set value
    loading.value = true; 

    ...

</script>

headlessui:

npm install @headlessui/vue@latest

heroicons:

npm install @heroicons/vue

vue3-cookies:

  npm install vue3-cookies


// Create Component in folder components/coockies/CookieConsent.vue -> Copy code.


// Then import to App.vue file

  ...

  <CookieConsent />

  ...

  import CookieConsent from './components/CookieConsent.vue';

  ...

SEO: vueuse/head

npm install @vueuse/head


//Main.js:
...
import { createHead } from '@vueuse/head';
...
const head = createHead();
app.use(head);


//Views Exmple Home.vue

...
import { useHead } from '@vueuse/head';
...
useHead({
  title: 'Home - PAGE',
  meta: [
    {
      name: 'description',
      content: 'Welcome to the home page of PAGE.',
    },
    {
      property: 'og:title',
      content: 'Home QQ Splytin',
    },
    {
      property: 'og:description',
      content: 'Welcome to the home page of PAGE.',
    },
    {
      property: 'og:image',
      content: 'URL_to_your_image',
    },
    {
      property: 'og:url',
      content: 'https://PAGE.com/',
    },
  ],
});

Cargar el archivo robots.txt

Tiene que estar en la carpeta public del proyecto.

User-agent: *
Disallow: /admin/
Disallow: /login/
Allow: /

Registrarse en google search console, con una cuenta google ejemplo: [email protected].

Select combobox:

npm install vue-select@beta

en main.js:

...
// vueselecu
import vSelect from 'vue-select';
...
app.component('v-select', vSelect);



Luego en XXXX.vue ejemplo: 

...
<v-select
    v-model="validate.country_id.$model"
    :options="countries"
    label="common_name"
    :reduce="country => country.id"
    :class="{ 'border-danger': validate.country_id.$error }"
    class="form-control"
></v-select>
...

...

import vSelect from 'vue-select';
import 'vue-select/dist/vue-select.css';
...



Nota: para que funcione tuve que agregar en base.css en el ::before ::after:
...
--vs-border-color: #ffffff;
...