vue-project | component library , combined with vue-router , vuex , axios | Command Line Interface library

Some videos do not work because Youtube does not always expose their video's urls when requested.

Youtube-DL makes a request to http://www.youtube.com/get_video_info?video_id=XXXX (where XXXX is the video ID) and this returns a JSON text file which has a listing of file urls for the MP4 / webM / M4A, OGG etc, associated with the requested video upload.

For example:

(1) Is working: You can find googlevideo.com links (MP4 etc) mentioned inside the JSON
Pinocchio (trailer) : http://www.youtube.com/get_video_info?video_id=y8UDuUVwUzg

(2) Not working: You cannot find googlevideo.com links in this JSON (no video links to download)
Mirage (full film) : http://www.youtube.com/get_video_info?video_id=FTY-L-l3KN8

in forms.py, the model and fields must be in Meta class

You can still use vuex with the vue cdn or within a script tag. When you initialize a new vue element, import the store variable and pass it into the vue element. You will then be able to access like normal.

Something like:

Bootstrap-Vue's component, is a wrapper for a native element. Where the input is not visible and instead shows a customized label, but still utilizes the input for file handling.

That means it will function the same way as the native input, which allows anything to be dropped into it. Even when having accept="image/*" applied. (at least in Chrome)

You will probably need to do some manual validation when your v-model changes to make sure it's in a correct format.

You could for example create a watcher to reset the input if it's an invalid file.

1. Open /Applications/XAMPP/xamppfiles/etc/httpd.conf file in any editor and look for the following lines.

The Vue Cli handles the injection when you are developing locally as your run command will be something like npm run serve for default configurations.

When you get round to putting the code into production you'll end up running a different command npm run build which will create a new set of files where the index.html file will include a script tag that references all your javascript code. Under the hood it uses webpack to do all the asset linking.

See the Vue Cli website for more details.

If, as you mention in your comments above, you still see the default Firebase "Welcome" page it means that probably you didn't overwrite it correctly.

You should put the entire content of your vue.js dist folder (generated through npm run build) into the public folder of Firebase hosting (and overwrite the default index.html file initially generated by the Firebase project setup script).

Then in you firebase.json file you have the following rewrite in order to handle the Single Page Application behavior of you vue.js application.

I think you need to use relative path without domain name (localhost), according to the documentation, like this:

There will be a file level/source control solution to allow you to synchronise copies of the shared component in the two projects. If you're using Git, look at shared submodules.

There is strong potential here for a nightmare. You've described it so well I think you're secretly aware. Reusable components (reusable across projects) shouldn't have a dependency on a vuex store, which is application specific. I would look at putting the store calls in a project-specific wrapper component, then passing them to the shared component as props. Reusable components shouldn't have any interaction with their environment apart from props and events, according to me.