Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Where do custom directives belong? #3127

Closed
wcjr opened this Issue Mar 26, 2018 · 10 comments

Comments

Projects
None yet
2 participants
@wcjr
Copy link

wcjr commented Mar 26, 2018

I couldn't find anything in the guide about a best practice on this. It seems a custom directive could be a plain old javascript file with the Vue.directive(...) syntax but I don't see a clear winner for its directory or is the best practice to simply put the registration in the default.vue layout?

Just wanting to use this in my project:

// Register a global custom directive called `v-focus`
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus()
  }
})

Thanks!

This question is available on Nuxt.js community (#c2708)
@paulgv

This comment has been minimized.

Copy link
Contributor

paulgv commented Mar 26, 2018

I'd register directives in a plugin:

plugins/
├── directives.js
// nuxt.config.js
{
  plugins: [
    '~/plugins/directives.js'
  ]
}
@wcjr

This comment has been minimized.

Copy link
Author

wcjr commented Mar 27, 2018

Thanks @paulgv , I was considering that but there's a statement in https://nuxtjs.org/guide/plugins about these being run before the instantiating the root Vue application...do you think directives loaded before will still be recognized once the root Vue app is instantiated?

@wcjr

This comment has been minimized.

Copy link
Author

wcjr commented Mar 27, 2018

I did what you suggested, no problems with what I was curious about with the root Vue instantiation. @paulgv, do you think it would be worth a little statement in the guide (https://nuxtjs.org/guide/directory-structure) or README's about what to do with directives?

@paulgv

This comment has been minimized.

Copy link
Contributor

paulgv commented Mar 27, 2018

It would be nice to have some more examples on what you can do in plugins (register mixins, filters, directives, etc.) for sure :)

@wcjr

This comment has been minimized.

Copy link
Author

wcjr commented Mar 27, 2018

oh good, I'm glad you think that. What can I/we do to ensure something like this is added?

@paulgv

This comment has been minimized.

Copy link
Contributor

paulgv commented Mar 28, 2018

The best way would be to fork https://github.com/nuxt/docs and add your examples to the plugins guide, then you can submit a PR to the main repo.

@wcjr

This comment has been minimized.

Copy link
Author

wcjr commented Mar 30, 2018

ok @paulgv , that makes sense and it looks like running it locally isn't difficult. I'll put this on my list to do.

@wcjr

This comment has been minimized.

Copy link
Author

wcjr commented May 15, 2018

hey @paulgv , I've started running into issues with the spa aspects of nuxt and am going to have to abandon nuxt for now. Hopefully simply having this note here will help others in the future. Thanks!

You can close the issue if you don't have anyone you could assign this to.

@cmty cmty bot closed this Aug 8, 2018

@cmty

This comment has been minimized.

Copy link

cmty bot commented Aug 8, 2018

This question has been resolved by @paulgv, see answer.

@cmty cmty bot added the cmty:status:resolved label Aug 8, 2018

@lock

This comment has been minimized.

Copy link

lock bot commented Nov 1, 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked as resolved and limited conversation to collaborators Nov 1, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.