Diretivas

Para ocultar itens específicos para usuários que não estão no domínio principal em um projeto que utiliza Vue 3, Inertia e Laravel 10, você pode seguir estes passos:

1. Identificação do Domínio no Laravel: Primeiro, você precisa identificar o domínio do usuário no lado do servidor, no Laravel. Você pode fazer isso utilizando a request para obter o domínio atual. Por exemplo, você pode criar uma middleware que verifica o domínio da solicitação e adiciona essa informação à sessão ou a algum serviço de estado global.

   // Exemplo de Middleware em Laravel
   public function handle($request, Closure $next)
   {
       $domain = $request->getHost();
       // Verificar se o domínio é o domínio principal
       $isMainDomain = $domain === 'your-main-domain.com';
       // Adicionar a informação à sessão ou estado global
       session(['isMainDomain' => $isMainDomain]);
       return $next($request);
   }
   

2. Enviar Dados do Domínio para o Vue via Inertia: Uma vez que você tenha a informação sobre o domínio disponível no Laravel, você pode passar esses dados para o Vue através do Inertia. Você pode fazer isso em seu controlador ou em qualquer lugar onde você retorne uma resposta do Inertia.

   // Exemplo de passagem de dados para o Vue via Inertia
   return Inertia::render('SeuComponente', [
       'isMainDomain' => session('isMainDomain')
   ]);
   

3. Usar a Informação no Vue: No seu componente Vue, você pode agora usar essa informação para condicionalmente renderizar elementos na UI. Se você estiver usando o Composition API do Vue 3, você pode fazer algo assim:

   // Exemplo de uso no Vue 3 com Composition API
   import { ref, onMounted } from 'vue'
   import { usePage } from '@inertiajs/inertia-vue3'
   
   export default {
       setup() {
           const isMainDomain = ref(false)
           
           onMounted(() => {
               const props = usePage().props
               isMainDomain.value = props.value.isMainDomain
           })
   
           return { isMainDomain }
       }
   }
   

   E no seu template:

   <template>
     <div v-if="isMainDomain">
       
     </div>
   </template>
   

Essa abordagem garante que a lógica de verificação do domínio seja feita no servidor (Laravel), onde é mais segura, e os dados relevantes são passados para o cliente (Vue) de forma eficiente através do Inertia. Lembre-se de ajustar o código para atender às suas necessidades específicas e testar cuidadosamente para garantir que tudo funcione como esperado.