[Question] Use as components

[Edwin Luijten]

I started with the hello world example and it worked.
Now I'm trying to re-create the cuba libre example I'm using Nuxtjs setup.

I made 3 components, recipe, description and ingredients in below format (omitted the other 2).

// recipe.vue
<template>
    <z-panel view="recipe" >
        <img slot="picture" src="https://zircleui.github.io/zircleUI/examples/cubalibre/img/cubata.png" width="100%" height="100%" />
        <section slot="circles">
            <z-scale
                    color="accent"
                    :angle="-45"
                    size="large">
                <h1>Cuba Libre</h1>
            </z-scale>
            <z-scale
                    :angle="180"
                    size="medium"
                    gotoview="recipe_description">
                Mixing
              </z-scale>
            <z-scale
                    :angle="45"
                    size="small"
                    gotoview="recipe_ingredients">
                3
                <div slot="label"> ingredients </div>
            </z-scale>
        </section>
    </z-panel>
</template>

<script>
    export default {
        name: 'recipe'
    }
</script>

Then I'm initializing them as below:

// index.vue
<template>
    <z-canvas>
        <z-view-manager :list='$options.components' />
    </z-canvas>
</template>

<script>
    import Recipe from '~/components/Recipe'
    import RecipeDescription from '~/components/RecipeDescription'
    import RecipeIngredients from '~/components/RecipeIngredients'

    export default {
        components: {
            Recipe,
            RecipeDescription,
            RecipeIngredients
        },
        beforeMount () {
            this.$zircleStore.setView('recipe')
        }
    }
</script>

$.options.components has below structure:

Now I only see a bluegrey screen, see below rendered html:

<div id="z-container" class="color--black theme--dark">
	<div id="z-point">
		<section>
			<!---->
			<!---->
			<!---->
		</section>
	</div>
</div>

Is there something I'm missing here?

[Juan Martin]

Hi @Edwin-Luijten! Thank you for your question.

Please try to use the exactly the name of the component you have defined in the Vue instance in the rest of your app.

export default {
        components: {
            Recipe,
            RecipeDescription,
            RecipeIngredients
        }
...
    }

For instance, for "Recipe" component, you should use the same name in <z-panel view="Recipe" >

// recipe.vue
<template>
    <z-panel view="Recipe" >
...

Also, do the same in the prop gotoview of the component <z-scale>. For example, if you want to go to "RecipeDescription" component you should put exactly the name of the component.

...
<z-scale
      ...
     gotoview="RecipeDescription">
               Mixing
    </z-scale>
...

Finally, you need to set the initial view "this.$zircleStore.setView('Recipe')" in your Vue Instance.

...
beforeMount () {
            this.$zircleStore.setView('Recipe')
        }
...

Note: It is not necesary to set the 'name' option in the component template in order to make your app work. But is desirable if you are using Vue dev-tools.

Zircle is in active development, your question helped me a lot to improve this aspect. Please, tell me if my suggestion helps you!

[Juan Martin]

@Edwin-Luijten, I've just set the view names to case-insensitive [zircle@0.1.5]
So, you should be able to do the following:

export default {
        components: {
            Recipe,
            RecipeDescription,
            RecipeIngredients
        }
...
    }

z-panel view prop

// Recipe.vue
<template>
    <z-panel view="RECIpe" >
...

z-scale gotoview prop

...
<z-scale
      ...
     gotoview="recipedescriptiON">
               Mixing
    </z-scale>
...

setView()

...
beforeMount () {
            this.$zircleStore.setView('RECIPE')
        }
...

[Edwin Luijten]

Awesome, it is working =).