No More Posting New Topics!

Akkayy

Is there an vue-cli’s “build —watch” (https://github.com/vuejs/vue-cli/issues/1317) equivalent in quasar?

Build —watch compiles & writes to disk (so no HMR) and keeps watching for any changes to files and recompiles if so and stays watching…

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.

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…

Akkayy

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

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>

Akkayy

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

No More Posting New Topics!

Akkayy

@Akkayy

Latest posts made by Akkayy