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

Alias/helpers for extending config files #845

Open
Akryum opened this issue Feb 16, 2018 · 2 comments · May be fixed by posrix/vue-cli#96, Matthelonianxl/vue-cli#58, carlosrojaso/vue-cli#81, FDiskas/vue-cli#5 or sayanriju/vue-cli#6
Labels
feature intend to implement The team has the intention to implement this feature at some point. Contribution is also welcome. scope: plugin API

Comments

@Akryum
Copy link
Member

Akryum commented Feb 16, 2018

Proposal for enhancing Generator API with additional convenience methods. Edited by @yyx990803 to incorporate #846 & #892.

Extending entry file

// Generator
api.extendScript('./src/main', file => {
  // Import a file
  file.injectImport('{ apolloProvider }', './vue-apollo')
  // Direct import
  file.injectImport('./style.css')
  // Add an option to the instance
  file.injectRootOptions({
    provide: 'apolloProvider.provide()',
  })
})

As suggested in #892 this can be done by translating the API into extra data passed to EJS when rendering the entry template:

import Vue from 'vue'
import App from './App.vue'
<%_ if (options.router) { _%>
import router from './router'
<%_ } _%>
<%_ if (options.vuex) { _%>
import store from './store'
<%_ } _%>
<%_ for(const _import of injectedImports) { _%>
import <%= _import.bindings %> from '<%= _import.from %>'
<%_ } _%>

Vue.config.productionTip = false

new Vue({
  <%_ if (options.router) { _%>
  router,
  <%_ } _%>
  <%_ if (options.vuex) { _%>
  store,
  <%_ } _%>
  <%_ for(const option of injectedRootOptions) { _%>
  <%= option %>,
  <%_ } _%>
  render: h => h(App)
}).$mount('#app')

Extending .gitignore

// Generator
api.extendGitignore([
  '/live/',
])

Extending tsconfig.json

// Generator
api.extendTsConfig(...)

Aliases for Extending Other Config Files

These could be just aliases on top of extendPackage

// Generator
api.extendVueConfig(...)
api.extendBabelConfig(...)
api.extendPostCSSConfig(...)
api.extendESLintConfig(...)
api.extendJestConfig(...)
api.extendBrowsersList(...)
@yyx990803 yyx990803 changed the title Exntending gitignore Alias/helpers for extending config files Mar 1, 2018
@yyx990803 yyx990803 added intend to implement The team has the intention to implement this feature at some point. Contribution is also welcome. feature and removed feature request labels Mar 1, 2018
This was referenced Mar 1, 2018
@LinusBorg
Copy link
Member

@Akryum @yyx990803

Is this proposal already done? I see that we have api.injectImports() and api.InjectRootOptions() for example

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/generator/router/index.js#L2-L3

  • If this is done, we should document these options in the cli docs -> Plugin Dev Guide.
  • If this it not done, what's missing?

@Akryum
Copy link
Member Author

Akryum commented Jul 5, 2018

I think we could have extendIgnoreFile and addToEnv as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment