Extending from github repo
Hey everyone, I am having trouble extending from a public github repository (nuxt project).
I am using nuxt version 3.15.2 and the following extends
`
The repo is public and built in nuxt (with a nuxt.config.ts file)
But when I run "npm run dev", I get the error
Failed to download https://api.github.com/repos/AxelSorensen/extend_test/tarball/main: 404 Not Found
Any ideas? Can you extend it from your machine? Much appreciated🙏
12 Replies
Hi @AxelSorensen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, I can help you with your question about extending from a GitHub repository in Nuxt.
The error you're encountering suggests that there might be an issue with accessing the GitHub repository you're trying to extend from. Let's go through a few points to help troubleshoot this:
1. Repository Accessibility: First, make sure that the repository "AxelSorensen/extend_test" is indeed public and accessible. The 404 error suggests that the repository might not exist or is not publicly accessible.
2. Correct Syntax: The syntax you're using for extending from a GitHub repository is correct according to the Nuxt documentation on layers. Your config includes the
install: true option, which is also correct for installing npm dependencies if the layer has any.
3. GitHub API Rate Limiting: Sometimes, GitHub API rate limits can cause issues. If you've made many requests, you might hit these limits. In such cases, you can try authenticating your requests by adding a GitHub token.
4. Alternative Syntax: You could try an alternative syntax for extending from a GitHub repository. According to the documentation, you can use different formats:
5. Authentication for Private Repositories: If you're trying to extend a private repository (which doesn't seem to be the case here, but for future reference), you would need to add authentication. You can do this by adding the environment variable GIGET_AUTH=<token> to provide a token.
6. Check GitHub Status: It's always worth checking if GitHub is experiencing any issues that might affect API access.
If you're still encountering issues after verifying these points, it might be helpful to double-check the repository URL and ensure it contains a valid Nuxt configuration.
For more detailed information on extending Nuxt configurations and layers, you can refer to the Nuxt documentation on layers.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@558317900943982593> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai Is there any way to see which components are available from the extension
Let me check the knowledge base for you again. One moment! :books:
----------------------
Yes, there are ways to see which components are available from the extension in Nuxt. Based on the knowledge sources provided, I can offer you some insights on how to do this:
1. Components Tab in Nuxt DevTools:
Nuxt DevTools provides a Components tab that shows all the components you are using in your app, including where they are from. This would include components from any extensions or layers you've added to your project. You can search for components and even see their source code.
Nuxt DevTools Features mentions:
"Components tab shows all the components you are using in your app and where they are from. You can also search for them and go to the source code."
2. Auto-import Scanning:
Nuxt automatically scans certain directories for components that can be auto-imported. When you extend your project using layers, the components from those layers should also be included in this scan.
According to the Nuxt documentation on layers:
"Additionally, certain other files in the layer directory will be auto-scanned and used by Nuxt for the project extending this layer.
-
components/* - Extend the default components"
3. Nuxt DevTools Graph View:
The Components tab in Nuxt DevTools also offers a Graph view that shows the relationships between components and their dependencies. This can be particularly useful for understanding how components from your extension integrate with your main project.
Nuxt DevTools Features states:
"Components tab also has a Graph view which you can toggle. Graph view also shows the relationship between components, and knows the dependencies of each component."
4. Inspecting the DOM Tree:
Nuxt DevTools allows you to inspect your app's DOM tree and see which component is rendering each part. This can help you identify components that are coming from your extension.
As mentioned in Nuxt DevTools Features:
"You can also inspect your app's DOM tree and see which component is rendering it. Finding the place to make changes are much easier."
To use these features, make sure you have Nuxt DevTools enabled in your project. If you're not seeing components from your extension, double-check that the extension is properly set up and that its components are in the correct directory structure to be auto-imported by Nuxt.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@558317900943982593> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
extends: ['github:AxelSorensen/extend_test#master', { install: true }]
that work https://codeload.github.com/AxelSorensen/extend_test/legacy.tar.gz/master
branch name is master
GitHub
Branches · AxelSorensen/extend_test
Contribute to AxelSorensen/extend_test development by creating an account on GitHub.
Ah thank you so much! Can't believe I missed this @Mittchel
Is there any way to do intellisense for the components from the extended github. So for example if I have a Button component it should autocomplete it in the same way it does with my local components
If the GitHub repository you're extending is published as an npm package then install the package and import components you need in nuxt
import { X } from 'external-package';Thanks, so no way to do this just from the repository
If not then may be using git submodule and configure typesscript paths in tsconfig.json
and try
import X from '@external-components/X.vue';
Thanks this worked! And when I remove it again it works too, perhaps I just needed a restart of vscode
I reuse many components across my apps so this extend feature is super nice. However if dependencies need to be installed, will they be installed everytime I run "npm run dev" (given that the {install: true} is configured and is there any downside to extending code like this, instead of using a more monorepo architecture where I have all my projects/layers in the same repo and just extend between them
@Mittchel Also I think it would really improve dev experience if I could get an overview of all the components/composables/etc. that are available to me from the extension. Perhaps I could build an extension for this (so I don't have to keep switching back and fourth between github to remember which components I have access to). Is something like this already possible, or do you have any idea how it could be implemented
Thanks @l422y