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

Akayy

Hi all,

I’m new to quasar, I started with creating a new quasar app using the command quasar create my-test.

Now, I want to move my simplest vue code (below) to my newly created quasar project.

I have done extensive reading on this forum and I think I’m stuck with the missing main.js in the quasar-cli structure and lack understanding on how quasar has abstracted it.

I’m pasting my simple code here, how do I migrate this to quasar-cli project.

index.html

<html>
  <body>
    <div id="q-app">
      <my-test inline-template>
        <div>
          <div> {{message}} </p></div>
        </div>
      </my-test>
    </div>
  </body>
</html

main.js

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

new Vue({
  el: '#q-app',
  components: {
    myTest
  }
})

Output of the above: (https://codepen.io/ahmed-kaja/pen/NWNxeEw)

This is what I have done till now:

Step-1 Pasted my inline-template inside the “q-app” tag in index.template.html file

Step-2 Now, I have no idea where my main.js code go.

Will the component registration (my-test in the above main.js) go into a boot file (or) do I wrap it as an app plugin?
I feel it might be straight-forward, but unable to figure it out as there is no main.js.
What edits to the vanila quasar-cli generated App.vue (below) is required to make my inline template work?

<template>
  <div id="q-app">
    <router-view />
  </div>
</template>

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

Some disclaimers:

I very well understand the pros & cons of inline-templates, and will build my app using components, but as a start, I want to make the above vue code to work in my quasar project.
I also understand that I can make the above easily work in umd/standalone mode, but I really want to achieve this in cli mode by editing only App.vue.
The only thread in this forum related to inline-template is this, but it’s a umd mode one, so wasn’t very helpful - https://forum.quasar-framework.org/topic/3629/vue-inline-templates

Thanks in advance for your help! Hope I can cross this small starting trouble and forget about main.js

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.

Akayy

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.

Akayy

@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

Akayy

This post is deleted!

Akayy

@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

Akayy

@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.