No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    CLI
    2
    11
    339
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • metalsadman
      metalsadman @Akkayy last edited by 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

      c7220639-1a30-493c-a70f-be2ba7d7551e-image.png

      see main.js is mentioned many times in there.

      A 1 Reply Last reply Reply Quote 0
      • A
        Akkayy @metalsadman last edited by 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>
        

        c84c25b9-edc7-4f48-9f37-f40c38b201ac-image.png

        metalsadman 1 Reply Last reply Reply Quote 0
        • metalsadman
          metalsadman @Akkayy last edited by

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

          A 1 Reply Last reply Reply Quote 0
          • A
            Akkayy @metalsadman last edited by

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

            a90f4964-2da4-4c2c-a586-cc9948a90f18-image.png

            metalsadman 1 Reply Last reply Reply Quote 0
            • metalsadman
              metalsadman @Akkayy last edited by 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

              A 2 Replies Last reply Reply Quote 0
              • A
                Akkayy @metalsadman last edited by

                This post is deleted!
                1 Reply Last reply Reply Quote 0
                • A
                  Akkayy @metalsadman last edited by 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?

                  deb12ba4-6ca2-46d8-aa44-529b28bf3f4a-image.png

                  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 1 Reply Last reply Reply Quote 0
                  • metalsadman
                    metalsadman @Akkayy last edited by 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

                    A 1 Reply Last reply Reply Quote 0
                    • A
                      Akkayy @metalsadman last edited by

                      @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 1 Reply Last reply Reply Quote 0
                      • metalsadman
                        metalsadman @Akkayy last edited by 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.

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post