How to use the vue package?

D

DocTypeMaster2021-09-19 19:31:11

Vue.js

DocTypeMaster, 2021-09-19 19:31:11

Friends, help me figure out how to use the vue-browser-detect-plugin package
From the documentation , it's not very clear to me how to use it, how to do a check, for example v-if="IOS"

I installed the package and connected it to the document. and then I don't understand at all.
here is my file where i want to embed

login.vue

<template>
  <Head title="Log in" />

  <jet-authentication-card>
    <template #logo>
      <jet-authentication-card-logo />
    </template>

    <div class="card-body">

      <jet-validation-errors class="mb-3" />

      <div v-if="status" class="alert alert-success mb-3 rounded-0" role="alert">
        {{ status }}
      </div>

      <form @submit.prevent="submit">
        <div class="mb-3">
          <jet-label for="email" value="Email" />
          <jet-input id="email" type="email" v-model="form.email" required autofocus />
        </div>

        <div class="mb-3">
          <jet-label for="password" value="Password" />
          <jet-input id="password" type="password" v-model="form.password" required autocomplete="current-password" />
        </div>

        <div class="mb-3">
          <div class="custom-control custom-checkbox">
            <jet-checkbox id="remember_me" name="remember" v-model:checked="form.remember" />

            <label class="custom-control-label" for="remember_me">
              Remember Me
            </label>
          </div>
        </div>
        <div class="mb-0">
          <div class="d-flex justify-content-end align-items-baseline">
            <Link v-if="canResetPassword" :href="route('password.request')" class="text-muted mr-3">
              Forgot your password?
            </Link>

            <jet-button class="ms-4" :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
              <div v-show="form.processing" class="spinner-border spinner-border-sm" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>

              Log in
            </jet-button>
          </div>
        </div>
        <div class="d-grid gap-2 mt-4">
          <h1 @click="aaa">dfsfs</h1>
            <a href="/auth/facebook" class="btn btn-primary text-white">facebook</a>
            <a href="/auth/google" class="btn btn-danger text-white">google</a>

        </div>



      </form>
    </div>



  </jet-authentication-card>
</template>

<script>
import { defineComponent } from 'vue'
import JetAuthenticationCard from '@/Jetstream/AuthenticationCard.vue'
import JetAuthenticationCardLogo from '@/Jetstream/AuthenticationCardLogo.vue'
import JetButton from '@/Jetstream/Button.vue'
import JetInput from '@/Jetstream/Input.vue'
import JetCheckbox from '@/Jetstream/Checkbox.vue'
import JetLabel from '@/Jetstream/Label.vue'
import JetValidationErrors from '@/Jetstream/ValidationErrors.vue'
import { Head, Link } from '@inertiajs/inertia-vue3';
import browserDetect from "vue-browser-detect-plugin";

export default defineComponent({

  components: {
    Head,
    JetAuthenticationCard,
    JetAuthenticationCardLogo,
    JetButton,
    JetInput,
    JetCheckbox,
    JetLabel,
    JetValidationErrors,
    Link,
  },
  props: {
    canResetPassword: Boolean,
    status: String
  },


  data() {
    return {
      form: this.$inertia.form({
        email: '',
        password: '',
        remember: false
      })
    }
  },
  methods: {
    submit() {
      this.form
          .transform(data => ({
            ... data,
            remember: this.form.remember ? 'on' : ''
          }))
          .post(this.route('login'), {
            onFinish: () => this.form.reset('password'),
          })

    }
  }
})
</script>

Foreshadowing the remarks that I need to learn the view, I will say that I understand this perfectly and I am moving in this direction.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexey Yarkov, 2021-09-19
@yarkov Vue.js

You failed to copy two lines? Where is the plugin initialization?
Vue.use(browserDetect);