Vue.js

ByteHide Logger integrates with Vue.js applications through plugins and provides component-level logging capabilities.

Installation

npm install @bytehide/logger vue

Plugin Setup

// plugins/logger.js
import { Log } from '@bytehide/logger';

export default {
    install(app, options) {
        Log.configure({
            projectToken: options.projectToken || process.env.VUE_APP_BYTEHIDE_TOKEN,
            logLevel: 'info'
        });
        
        app.config.globalProperties.$log = Log;
        app.provide('logger', Log);
        
        Log.info('Vue.js logger plugin initialized');
    }
};

App Configuration

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import LoggerPlugin from './plugins/logger';

const app = createApp(App);

app.use(LoggerPlugin, {
    projectToken: process.env.VUE_APP_BYTEHIDE_TOKEN
});

app.mount('#app');

Component Usage

<template>
    <div>
        <button @click="handleClick">Click me</button>
    </div>
</template>

<script>
export default {
    name: 'MyComponent',
    mounted() {
        this.$log.info('MyComponent mounted');
    },
    beforeUnmount() {
        this.$log.info('MyComponent will unmount');
    },
    methods: {
        handleClick() {
            this.$log.info('Button clicked', {
                context: { component: 'MyComponent', action: 'click' }
            });
        }
    }
};
</script>

Composition API

<script setup>
import { inject, onMounted, onUnmounted } from 'vue';

const logger = inject('logger');

onMounted(() => {
    logger.info('Component mounted with Composition API');
});

onUnmounted(() => {
    logger.info('Component unmounted');
});

const handleSubmit = () => {
    logger.info('Form submitted', {
        context: { form: 'contact-form' }
    });
};
</script>

Error Handling

// main.js
app.config.errorHandler = (error, instance, info) => {
    Log.error('Vue error handler caught error', {
        context: { 
            componentName: instance?.$options.name,
            errorInfo: info
        }
    }, error);
};

Router Integration

// router/index.js
import { createRouter } from 'vue-router';
import { Log } from '@bytehide/logger';

const router = createRouter({
    // ... routes
});

router.beforeEach((to, from, next) => {
    Log.info('Route navigation', {
        context: { 
            from: from.path, 
            to: to.path 
        }
    });
    next();
});

export default router;

Vuex/Pinia Integration

// store/index.js (Vuex)
import { Log } from '@bytehide/logger';

const store = createStore({
    mutations: {
        SET_USER(state, user) {
            Log.info('User state updated', {
                context: { userId: user.id }
            });
            state.user = user;
        }
    },
    actions: {
        async loginUser({ commit }, credentials) {
            Log.info('Login attempt started');
            
            try {
                const user = await login(credentials);
                commit('SET_USER', user);
                
                Log.identify(user.id, user.email);
                Log.info('Login successful');
                
                return user;
            } catch (error) {
                Log.error('Login failed', {
                    context: { email: credentials.email }
                }, error);
                throw error;
            }
        }
    }
});

Best Practices