7 Secret Patterns Vue Consultants Don’t Want You to Know - Chris Fritz

What people said

Recommends Adam Bradford · 2018-05 · Stack Overflow · on “vue, emitting vs passing function as props”

You’re looking for “Transparent Wrappers” Vue's customs event works different from a native DOM event. So you need to attach .native property to the event But if you want the event to happen on the child, then you define a computed property that will return and an object of listeners. And now you won't By default, attributes not defined as props will be added to the root element of the view So you can set inheritAttrs: false and then bind the $attrs to the child and it then becomes the target for those attributes Now you don't have to think about what the root component is. Chris Fritz does a great job explaining how they work in his 7 secret patterns talk. Starts around 21:44 [this video]

Recommends Prashant · 2018-06 · Stack Overflow · on “Multiple imported and registered components in vue.js”

You can automatically register such repeated base components globally using the pattern described in the official docs [LINK] Chris Fritz [LINK] also talks about this pattern in his awesome video [this video] where he mentions 7 secret patterns for cleaner code and productivity boost while working with Vue.js [LINK] The disadvantage of this approach, however, is that the components that you autoregister this way always end up in the main bundle and therefore cannot be lazy loaded/code-splitted. So make sure you do this only for the base components that are very generic.

Recommends Jorge Urosa · 2018-09 · Stack Overflow · on “How to display content by page number or prev next clicked on the vue?”

Maybe this is not the best way to answer you (redirecting to a video), but i think this video will be clearer than me about what is happening, and how to solve it . [this video]

Recommends carlos · 2019-02 · Stack Overflow · on “how to import components to add them to routes with Vue and VueRouter”

Chris Fritz [LINK] had a talk where explain it [this video] His presentation is in github [LINK] I don't understand so much this code, but it works import Vue from 'vue' import upperFirst from 'lodash/upperFirst' import camelCase from 'lodash/camelCase' // Require in a base component context const requireComponent = require.context( './components', false, /base-[\w-]+\.vue$/ ); requireComponent.keys().forEach(fileName => { // Get component config const componentConfig = requireComponent(fileName) // Get PascalCase name of component const componentName = upperFirst( camelCase(filename.replace(/^\.\//,'').replace(/\.\w+$/, '')) ) // Register component globally Vue.component(componentName, component

Recommends Ricky Ruiz · 2019-12 · Stack Overflow · on “How to import multiple svgs in vue.js via vue-svg-loader”

@wittgenstein Chris explains why you need to use `default` depending on how the module is imported here [this video] .

Recommends htmn · 2020-01 · Stack Overflow · on “Where to put VueJS components common across the application”

You can use global component registration trick by Chris Fritz [this video] . You just to need to modify it a bit so it's more fitting for a nuxt.js app. So you can create a base folder under your components folder and keep all these shared components there. Then create a new plugin and change the path to your @/components/base folder and modify the regex so it grabs all the files, no matter what the name is: globalComponents.js import Vue from 'vue' import upperFirst from 'lodash/upperFirst' import camelCase from 'lodash/camelCase' export default () => { const requireComponent = require.context( '@/components/base', false, /[\w-]+\.vue$/ ) requireComponent.keys().forEach(fileName => { const comp

Recommends Daniel Rodríguez Meza · 2020-07 · Stack Overflow · on “Vuetify, tooltips: what are "on" and "attrs" for?”

I could explain myself what that means, but I consider that this video explains it a lot better I let you the time where it stars explaining the utility of v-on and attrs Just take a look to the section Transparent wrappers [this video] Summary v-on : Binds a series of listener functions More in: [LINK] $attrs : Stores the attributes setted in the parent component, you can reuse them in a inner component More in: [LINK] You can find other usages besides of what is shown in the video, but transparent wrappers are a common use case.

Recommends Michal Šindelář · 2021-07 · Stack Overflow · on “Access props passed into child without defining them”

$props [LINK] object just reflects the props passed into a component which are declared on the component (using props: {} section) What you want is to use $attrs [LINK] instead Contains parent-scope attribute bindings (except for class and style ) that are not recognized (and extracted) as props. When a component doesn’t have any declared props, this essentially contains all parent-scope bindings (except for class and style ), and can be passed down to an inner component via v-bind="$attrs" - useful when creating higher-order components. You might also want to use inheritAttrs [LINK] option in your "man in the middle" (or wrapper) component. Read Non-Prop Attributes [LINK] Also If you are in

Cites Jay · 2018-06 · Stack Overflow · on “Issues with registering Vuex modules, either namespaces not found or getters.default is empty”

I've been going in circles trying to set up Vuex modules for a project. I've tried following a tweaked example of Chris Fritz example of registering components in a more productive way as seen here: [this video] , but when I try to use ...mapActions, I get issues that the namespace can't be found, if I try to register the modules manually, I get the error that the getter.default expected an action, but returned {} I'll try keep this clean - the first lot of info is my module setup, the next section is what produces the first issue and the code, the second is the second attempt which produces the getter issue. My Module setup... ./store/modules/ModuleName : ./store/modules/ModuleName/index.js impo

Cites Daniel F · 2018-09 · Stack Overflow · on “Using $emit to call a function”

I'm new to vue.js and am trying to understand how $emit can be used. In the following code, every input element except for the last one works as expected. My assumption in the last input element is that calling $emit with an event name would be the same as calling the function which has that event name, but it doesn't call that function. What is occurring with this $emit? I've read through Binding Native Events to Components [LINK] and that shows that it is to be used differently as I'm doing it. All this approach started from me watching a YouTube video (7 Secret Patterns...), specifically at this time [this video] where you can see that usage on the slide. Here is the code in JSFiddle [LINK] <s