Cannot read property 'smAndDown' #13919

noxlock · 2021-07-11T08:58:59Z

noxlock
Jul 11, 2021

Hi all, first time working with vuetify (and vue, for that matter).

I'm working on a project and trying to serve vue from Django. This can be done a couple ways, with SFC or making it an SPA, but I'd like this to be a MPA.

I've been following this guide, and I'm trying to set it up so I can pass props to vue components. I can currently do this, but when I try to incorporate vuetify for some more complex components, (toolbar, item groups ect), I receive some errors. Alerts, however, work perfectly fine.

Here is my repo, and the files in question are:
MAOL/vue/src/home.js ( Where I instantiate Vue )
MAOL/vue/src/components/ToolBar.vue ( The Toolbar I'm trying to render, causing the 'smAndDown' issue)
MAOL/home/templates/home/index.html ( The django template I'm instantiating the toolbar component from, and passing the props through.)

When trying to render my ToolBar component in my django template, I get these errors:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'smAndDown' of undefined"
found in

---> <VToolbar>
       <Toolbar> at src/components/ToolBar.vue
         <Root>

vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read property 'smAndDown' of undefined
    at VueComponent.computedContentHeight (VToolbar.js?71d9:54)
    at Watcher.get (vue.runtime.esm.js?2b0e:4495)
    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4597)
    at VueComponent.computedGetter [as computedContentHeight] (vue.runtime.esm.js?2b0e:4851)
    at VueComponent.genContent (VToolbar.js?71d9:118)
    at Proxy.render (VToolbar.js?71d9:136)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3569)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4081)
    at Watcher.get (vue.runtime.esm.js?2b0e:4495)
    at new Watcher (vue.runtime.esm.js?2b0e:4484)

I posted this in the Vuetify discord, and the solution of wrapping my code in a <v-app> was proposed, unfortunately, it didn't work. Whether I have done that wrong somehow, I'm not sure. I tried just wrapping the ToolBar component (in the .vue's template tags), as well as bringing in vue and vuetify in the django template itself and creating a div there. Neither seemed to work.

Answered by KaelWD

Jul 11, 2021

src/home.js:

- import Vue from 'vue/dist/vue.js'
+ import Vue from 'vue'

templates/home/index.html:

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
-   <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
-   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  </head>

<body>
-   <v-app>
    <div id="hello_world_a" style="width: 49%; display: inline-block">
+       <v-app>
            <tool-bar msg="{{ msg }}"></…

View full answer

KaelWD · 2021-07-11T09:33:19Z

KaelWD
Jul 11, 2021
Maintainer

src/home.js:

- import Vue from 'vue/dist/vue.js'
+ import Vue from 'vue'

templates/home/index.html:

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
-   <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
-   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  </head>

<body>
-   <v-app>
    <div id="hello_world_a" style="width: 49%; display: inline-block">
+       <v-app>
            <tool-bar msg="{{ msg }}"></tool-bar>
+       </v-app>
    </div> 
       
-   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
-   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
-</v-app>
</body>

1 reply

noxlock Jul 11, 2021
Author

Doing this, plus adding runtimeCompiler: true to vue.config.js.module.exports solved it, thanks heaps!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Cannot read property 'smAndDown' #13919

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Cannot read property 'smAndDown' #13919

Uh oh!

noxlock Jul 11, 2021

Replies: 1 comment · 1 reply

Uh oh!

Uh oh!

KaelWD Jul 11, 2021 Maintainer

Uh oh!

noxlock Jul 11, 2021 Author

noxlock
Jul 11, 2021

Replies: 1 comment 1 reply

KaelWD
Jul 11, 2021
Maintainer

noxlock Jul 11, 2021
Author