Add accounts to Vue

help
1

This is really great

but seems to miss accounts-ui , how can I add accounts like old blaze function?

2

if you add this package

vuejs:blaze-integration

you can add in the accounts ui blaze template with the following code in a vue component

<blaze-template template="loginButtons" tag="span"></blaze-template>
3

Thanks for that,

I’m trying to add accounts-ui to vue-meteor-demo
Can you suggest what other dependencies or imports may be needed?
I have installed these:

vuejs:blaze-integration
accounts-ui
accounts-password

but got browser console message [Vue warn]: Unknown custom element: <blaze-
I then meteor add blaze-html-templates

but then got a blaze-html-templates – error: conflict: two packages included in the app (templating-compiler and static-html) are both trying to handle *.html

*.VUE is attached – any ideas appreciated

<template>
  <nav>
    <div class="app-title">Vue+Meteor</div>
    <div class="btest"> <blaze-template template="loginButtons" tag="span"></blaze-template></div>
   
    <router-link :to="{ name: 'home' }" exact>Home</router-link>
    <router-link :to="{ name: 'shop' }">Shop</router-link>
    <router-link :to="{ name: 'notes' }">Notes</router-link>
    <router-link :to="{ name: 'map' }">Map</router-link>
    <router-link :to="{ name: 'apollo' }">Apollo</router-link>
    <router-link :to="{ name: 'async' }">Async</router-link>
    <router-link :to="{ name: 'about' }">About</router-link>
    <div class="actions">
      <!-- <button @click="openCart"><i class="material-icons">shopping_cart</i></button> -->
    </div>
  </nav>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions('layout', [
      'showCart'
    ]),

    openCart () {
      this.showCart(true)
    },
  },
}
</script>

<style lang="less" scoped>
@import "style/imports";



.btest {
  background-color:pink;
  width:200px;
  height:150px;
}

nav {
  background: @app-color;
  display: flex;
  flex-direction: row;
4

this is a sample repo that makes use of that package https://github.com/BrianMulhall/simple-todos-vue in a vue app

5

this will technically work but it’s not ideal as youre increasing your bundle size by importing an entire UI framework and only using one component of it

6

im not making any claims about this being an ideal solution, only that the repo I made as guide for a beginner is an example of using a blaze template inside of a Vue app. As someone who wasnt a beginner that long ago,i can say that when i was new to Meteor I didnt care about my client bundle’s size. I just wanted to be able to experiment with things a bit

1 Like
7

I don’t think that adding Blaze and Blaze accounts is a good solution here. That’s a large amount of bloat.

8

Thanks heaps Brian,
https://github.com/BrianMulhall/simple-todos-vue.git
worked great for adding blaze accounts-ui to vue-meteor
Im adapting it that into [https://github.com/meteor-vue/vue-meteor-demo.git]

seems it needed a name attribute for that other project
<blaze-template name="NAME" template="loginButtons" tag="span"></blaze-template>

I couldn’t seem to find how tag="span" worked?

Thanks again

9

No problem :slight_smile: happy to help you out.

The other comments in this thread are correct in that by using this 3rd party package you will be adding alot of additional code to your project. But it is certainly convenient and useful.

the tag attribute allows you to override the default markup that the Blaze template is added inside of
This is the documentation for that is here GitHub - meteor-vue/blaze-integration: Vue integration with Meteor's Blaze rendering engine.

You can use a different tag for the wrapper tag (default is div):

<blaze-template template="myBlazeTemplate" tag="span"></blaze-template>
10

Thanks Brian, yeah demo stage

1 Like
11

pls ignore: was my mistake :sweat_smile:

I cant seem to get a reference to the router by this.$router ?