How to install app extension from local directory or github repo

[ajenkins-cargometrics]

I want to create an app extension just for internal use by our team. I don't want to publish it to npm. Instead I'd like to be able to install it from a github repo or local directory. Are either of these options possible? The documentation only shows installing app extensions using quasar ext <ext-id>, which would only work if my app extension is published to npm.

Alternatively, I could just create a library, since those can be referenced in package.json via a github url. I don't really need an app extension, since all I really want is to package up some custom quasar components and utility functions that I want to share among multiple projects. However I couldn't find directions for how to create a library of quasar components. Has anyone here done that, and have a link to some documentation on how? Would something like vue-sfc-rollup be useful for this?

Thanks.

[DaDuFan]

I am interested in this, too.
So I hope someone has information how to do this.

Meanwhile, one solution would be to use e.g. https://verdaccio.org/en/
A lightweight open source private npm proxy registry

This allows you to publish your private app extensions to your own private registry.
But it is another service that must be administrated (e.g. with docker, ...)

[smolinari]

It's the development process, so a bit more "roundabout", but you can clone the repo and then "invoke" the app extension.

Scott

[rstoenescu]

You don't have to necessarily publish the App Extension. To be a little more precise:

1. You clone your AE repo into a folder.
2. In a Quasar CLI project, you manually install the AE dep (yarn add --dev /path/to/my/cloned/ae/folder)
3. Still in the Quasar CLI project, you then invoke the manually installed AE: (quasar ext invoke <name_of_your_ae>)

Note that for every change in the AE, you'll need to repeat the steps.

[ajenkins-cargometrics]

Thanks. That works.

Now I've run into the problem that the components I want to share are all written as SFCs, but app extensions don't support SFCs out of the box. I found this PR, quasarframework/quasar-starter-kit-ui#19, which the author says makes SFCs work, but when tried those changes they don't solve the problem for me. When I run yarn build I still get a syntax error when it tries to parse my .vue files, as if it's interpreting them as Javascript files. Have you ever gotten SFCs to work in an app extension?

Thanks.

[rstoenescu]

There should be a clear distinction between an App Extension and any UI package. All that the App Extension does is it injects specific Quasar CLI configuration (even boot files etc). App Extensions are a convenient way to share the configuration of a Quasar App. On the other hand, App Extensions can also supply packages to the Quasar app project. These packages should contain your components, directives, or any other feature AND of course, they can also be directly imported and used into an App. I think that you only want the second? In this case, same strategy should apply. SFC files are handled automatically by Quasar App CLI in the host app, regardless if they come from a dependency (like one of your packages) or they're part of your /src (from the host app).

[ajenkins-cargometrics]

Thanks. You're right, I don't really need an app extension, I just want to create a library of components to share among projects. So I could just use the "ui" package directly. The problem I run into is that when I add a .vue file to the project, then when I run yarn build, I get a syntax error from the .vue file. That is, I do

quasar create my-ext --kit ui

cd my-ext/ui
yarn build

and everything works. I can then yarn add my-ext/ui to another quasar project and use the sample component, which is implemented as a .js file with a render function.

Now I try adding a .vue component to my-ext/ui/src/components, and export it in my-ext/ui/src/index.js, and when I run yarn build, I get a syntax error from the .vue file, because it's trying to compile the .vue file as if it were a .js file.

How do I do what you're suggesting, that is have a dependency that includes .vue files, and leave it to the host app to compile them?

[marco-mazzocchi]

if your problem is related to SFC I found a solution: using Rollup Plugin Vue in the build script make it possible to include Single File Components.
You have to install in dev dependencies rollup-plugin-vue@^5.1.9 (less then 6.0.0), vue-template-compiler and @vue/compiler-sfc, something like:

npm install --save-dev rollup-plugin-vue@5.1.9 vue-template-compiler @vue/compiler-sfc

Then in ui/build/script.javascript.js import the rollup-plugin-vue:
const vue = require('rollup-plugin-vue')

and update rollupPlugins declaration:

const rollupPlugins = [
 // ...
  vue({
    css: true,
    template: {
      isProduction: true,
    },
  }),
  nodeResolve({
    extensions: ['.js', '.vue'],
    preferBuiltins: false
  }),
  // ...
]

Build command now should support sfc file with .vue extension.