Unexpected useless attribute on template "Creating speckle app"

Hey,

I am going through the tutorial and I keep getting this message when building:

i cannot see the result as displayed in Creating Your Own App | Speckle Docs
now the serverUrl error i do not mind, but I cannot see the searchbar of the streams. I only see this:

Help?

Thanks @Dickels112 I see there are a few updates that can be made to that tutorial. Some clarifications and some updates as Vue-CLI has changed a few things.

The specific error you are finding can be solved with a change to the Home.vue script:

<script>
import StreamSearch from "@/components/StreamSearch"
import WelcomeView from "@/views/WelcomeView"

export default {
  name: "HomeView",
  components: { WelcomeView, StreamSearch },
  data: () => ({
    serverUrl: process.env.VUE_APP_SERVER_URL
    }),
  methods: {},
  computed: {
    selectedStream: function() {
      return this.$store.state.currentStream
    }
  }
}
</script>

This adds an import missing from the tutorial and modifies the structure of the returned data object.

I presume you resolved the mismatch in the StreamSearch vs SpeckleSearch naming instruction…

I hope the above gets you on your way and in the meantime, I’ll update the example docs :smiley:

A quick step after that, in fact, will reveal that the version of timeago the tutorial mentions installs the one for Vue3 which since the doc was written has become default.

Another of the things I’ll be updating, but if you instead:

npm i vue2-timeago
npm uninstall vue-timeago

and then in StreamSearch.vue:

import { TimeAgo } from 'vue2-timeago'
.
.
}),
components: { TimeAgo }, // register the component
watch: {

change the reference to <timeago> to <time-ago>

1 Like

Thanks, looks like this will solve my issue.
I’ll try it out as soon as I have scheduled more time for it! thanks!

1 Like

Thank you. I have refreshed our docs on this, which were left behind by framework version updates.

2 Likes