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

    Quasar on Laravel [Vue warn]: Unknown custom element: <q-layout>

    Help
    3
    5
    7368
    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.
    • W
      willagner last edited by

      Hi experts !

      I am starting using quasar, and i am trying use quasar on laravel.

      I did the step-by-step:
      http://blog.aprilpnguyen.com/2017/04/how-to-set-up-quasar-on-laravel-vue-framework.html

      But, when i open my page, i receive this message:
      [Vue warn]: Unknown custom element: <q-layout> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

      found in
      …/resources\assets\js\components\App.vue

      My app.js

      require('./bootstrap');
      
      window.Vue = require('vue');
      
      require('quasar-framework/dist/quasar.mat.css');
      
      import Quasar from 'quasar-framework';
      
      Vue.use(Quasar);
      
      Vue.component('example', require('./components/Example.vue'));
      
      Vue.component('app', require('./components/App.vue'));
      
      const app = new Vue({
      el: '#app'
      });
      

      My App.vue

      <template>
      <div>
      	<q-layout>
      		<!-- Header -->
      		<div slot="header" class="toolbar">
      			<!-- opens left-side drawer using its ref -->
      			<button class="hide-on-drawer-visible" @click="$refs.leftDrawer.open()">
      				<i>menu</i>
      			</button>
      			<q-toolbar-title :padding="1">
      				Title
      			</q-toolbar-title>
      			<!-- opens right-side drawer using its ref -->
      			<button class="hide-on-drawer-visible" @click="$refs.rightDrawer.open()">
      				<i>menu</i>
      			</button>
      		</div>
      		<!-- Navigation Tabs -->
      		<!-- <q-tabs slot="navigation">
      		<q-tab icon="mail" route="/layout" exact replace>Mails</q-tab>
      		<q-tab icon="alarm" route="/layout/alarm" exact replace>Alarms</q-tab>
      		<q-tab icon="help" route="/layout/help" exact replace>Help</q-tab>
      		</q-tabs> -->
      		<!-- Left-side Drawer -->
      		<q-drawer ref="leftDrawer">
      			<div class="toolbar">
      				<q-toolbar-title>
      				Drawer Title
      				</q-toolbar-title>
      			</div>
      			<div class="list no-border platform-delimiter">
      				<!-- <q-drawer-link icon="mail" :to="{path: '/', exact: true}"> -->
      				<!-- <q-drawer-link icon="mail" :to="{}">
      
      				Link
      				</q-drawer-link> -->
      			</div>
      		</q-drawer>
      		<!-- IF USING subRoutes only: -->
      		<!-- <router-view class="layout-view"></router-view> -->
      		<!-- OR ELSE, IF NOT USING subRoutes: -->
      		<div class="layout-view"></div>
      		<!-- Right-side Drawer -->
      		<q-drawer ref="rightDrawer">
      			...
      		</q-drawer>
      		<!-- Footer -->
      		<div slot="footer" class="toolbar">
      			....
      		</div>
      	</q-layout>
          </div>
      </template>
      
      
      <script>
      export default {
      
      data: function() {
        return {
      
        };
      },
      
      mounted() {
        console.log('Component mounted.')
        }
      }
      </script>
      

      My package.json

      {
      "private": true,
      "scripts": {
      "dev": "npm run development",
      "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
      "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
      "watch-poll": "npm run watch -- --watch-poll",
      "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
      "prod": "npm run production",
      "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
        },
        "devDependencies": {
      "axios": "^0.16.2",
      "bootstrap-sass": "^3.3.7",
      "cross-env": "^5.0.1",
      "jquery": "^3.1.1",
      "laravel-mix": "^1.0",
      "lodash": "^4.17.4",
      "vue": "^2.1.10",
      "material-design-icons": "^3.0.1",
      "roboto-fontface": "^0.7.0",
      "fastclick": "^1.0.6",
      "moment": "^2.15.0",
      "quasar-extras": "^0.0.7",
      "quasar-framework": "^0.14.1"
        }
      1 Reply Last reply Reply Quote 0
      • a47ae
        a47ae last edited by

        You pulled in the most recent version of Quasar (which is good), but the article was pr v0.14 times. With v0.14 Quasar utilizes tree shaking and you have to import each used component, read about it in the docs

        1 Reply Last reply Reply Quote 0
        • J
          jffernandez last edited by jffernandez

          Hi willagner!
          You have to add the Quasar components you are using in the template, in App.vue, replace:


          <script>
          export default {

          data: function() {


          with:


          <script>
          import { QLayout, QToolbar } from ‘quasar-framework’
          export default {
          components: {
          QLayout,
          QToolbar
          },
          data: function() {


          And you have to delete q-drawer component, it’s not a valid component in 0.14 (not sure, but I can’t find it!)

          Hope that helps!

          1 Reply Last reply Reply Quote 0
          • W
            willagner last edited by

            It worked, thank you !!!

            1 Reply Last reply Reply Quote 0
            • J
              jffernandez last edited by

              Great!

              Only for reference, here is an updated tutorial from @april for Quasar 0.14 with Laravel:
              http://blog.aprilpnguyen.com/2017/08/how-to-set-up-quasar-v014-on-laravelvue.html

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