Unable to start with quasar cli - editing App.vue to use inline template

[metalsadman]

@Akayy just register it in a boot file. this code right here.

Vue.component('my-test', {
  data: function () {
    return {
      message: "Hello!"
    }
  }
})

it’s explained in the bootfile docs https://quasar.dev/quasar-cli/boot-files#Introduction

see main.js is mentioned many times in there.

[Akkayy]

Thanks @metalsadman. Plugin renaming to boot is where I got confused as it’s used interchangeably in the forum. Is this correct?

boot file

export default async ({ Vue }) => {
  Vue.component("mytest", {
    data: function() {
      return {
        message: "Hello!"
      };
    }
  });
};

How do I use it in App.vue? This is what I got, but it’s throwing an error.

<template>
  <div id="q-app">
    <mytest></mytest>
  </div>
</template>

<script>
import myTest from "boot/my-test";

export default {
  name: "App",
  components: {
    mytest: mytest
  }
};
</script>

[metalsadman]

@Akayy please read the docs, whole registration includes adding it in your quasar.conf.js boot array.

[Akkayy]

@metalsadman I did add it to quasar.conf.js like this

[metalsadman]

@Akayy use it whereever inside your app since it’s registered globally, not in index.html. example https://0ybb3.sse.codesandbox.io/
source https://codesandbox.io/s/quasar-v1-samples-0ybb3?file=/src/boot/inline-template.js

[Akkayy]

This post is deleted!

[Akkayy]

@metalsadman Really appreciate your help a lot.

I notice that you have added my inline template within index.vue. I just wanted to know, if this is how has to be done in quasar, which is inline-template have to be within one of the vue components?

What I really intend to do is keep the inline template with my index.html itself, is this possible at all?

I referred to the vuejs documentation reg inline templates here - https://vuejs.org/v2/guide/components-edge-cases.html#Inline-Templates. It states the inline template needs to be defined inside the DOM element to which Vue is attached. Hence, exploring the possibility of achieving what I wanted.

Again, thanks for your patience…

[metalsadman]

@Akayy umm inline template, you must always define the template whenever you want to use them. so i don’t know the reason why you want it so, if you want it to be static then just define the template in your component registration in your boot file, pretty much the same as an sfc.

it seem like inline-template is not what you’re looking for, and just a heads up this feature is getting deprecated in vue 3. https://github.com/vuejs/rfcs/blob/master/active-rfcs/0016-remove-inline-templates.md

[Akkayy]

@metalsadman Thank you!

If you look at this pen (not a quasar project) - https://codepen.io/ahmed-kaja/pen/NWNxeEw, I was able to keep my inline-template within the html page itself, and the vue instance when attached to q-app element, is able to use the inline template…

I’m aware of the dying inline template… just that I’m experimenting a new technique and hence want to keep the inline template within the html file itself and use it within a quasar-cli project. Probably, I have to bypass loading App.vue, i guess, which probably might involve touching the js files within .quasar.

[metalsadman]

@Akayy inside q-app is already vue, it’s the same as using it within other components. you can even test that in your codepen, move it out of the q-app div, or copy paste the inline-template multiple times. i dunno what you are trying to do at this point, so yep goodluck.