[Vuejs]-SignalR connection inside Vue Single File Component

_{Preface: I know nothing about SignalR}

I think the issue is that nothing here is waiting for the connection to establish. You may need to add some sort of “ready” flag and use it to control some of your UI elements.

For example

data: () => ({
  userName: '',
  userMessage: '',
  messages: [],
  ready: false
}),
created () {
  this.connection = new signalR.HubConnectionBuilder()
    .withUrl('http://localhost:44382/chat')
    .configureLogging(signalR.LogLevel.Information)
    .build()

  this.connection.start().then(() => {
    this.ready = true // toggle ready flag here
  }).catch(err => {
    console.error(err.toString())
  })
}

and in your template, something like this

<form>
  <fieldset :disabled="!ready">
    <!-- the rest of your form goes in here -->
  </fieldset>
</form>

<fieldset> elements are handy for disabling a group of form elements at once.

You may note that I have not defined connection within the data() function. This is because it is not a reactive property.