WebSocket connections can be tricky to get right, especially when using Vue.js as your front-end framework. Here are some common issues you might encounter while establishing a WebSocket connection from a Vue.js application, along with their solutions:

1. Cross-Origin Resource Sharing (CORS): WebSockets are subject to the same-origin policy by default, which means that they can only be established from pages served from the same domain as the WebSocket server. If you're trying to connect to a WebSocket running on a different domain, you'll need to configure your server to enable CORS. You can use libraries like cors in Node.js or add the following snippet to your server-side code:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

2. Firewall Issues: If you're trying to connect to a WebSocket from a local environment and your firewall is blocking incoming connections, it could cause issues with establishing the connection. You might need to disable your firewall temporarily or configure it to allow incoming connections on the necessary port.

3. WebSocket Server Implementation: Different web servers (like Node.js, Express.js) have different WebSocket implementations. If you're using a server that doesn't support WebSockets natively, you might need to use additional libraries or plugins like ws for Node.js.

4. Nginx Proxy Configuration: If you're behind a reverse proxy like Nginx, make sure it's properly configured to pass WebSocket connections through correctly. You may need to add the following configuration to your Nginx server block:

location /socket.io/ {
    proxy_pass http://your-websocket-server:port;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

5. Connection Timeout: WebSocket connections can take a long time to establish, especially over slow or congested networks. If you're experiencing timeout issues, try increasing the maxPayloadSize in your Vue.js app or the server-side implementation of your WebSocket server.

6. Internet Explorer Compatibility: Internet Explorer 11 has known compatibility issues with WebSockets. Ensure that your application is compatible with other modern browsers and doesn't rely on outdated browser features.

7. Network Latency: Network latency can significantly impact WebSocket performance. Test your connection to ensure it's fast enough for your needs. You might need to consider implementing buffering or batching techniques in your application if you encounter high latency issues.

By addressing these common issues, you should be able to successfully establish a WebSocket connection from your Vue.js application.