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

[willagner]

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"
  }

[a47ae]

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

[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!

[willagner]

It worked, thank you !!!

[jffernandez]

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