Unable to create a vue-web-extension from vue-cli - vue.js

Currently, I am modifying a chrome extension I have built to adding a popup page that is developed in Vue. I am using this tutorial, https://www.streaver.com/blog/posts/create-web-extension-vue.html.
Whenever I try the step vue init kocal/vue-web-extension my-extension, I get the following error:
vue-cli ยท ENOENT: no such file or directory, scandir '/Users/avidave/.vue-templates/kocal-vue-web-extension/template'
I have updated my vue-cli to the latest version so I am not sure what this really means. I know the file template doesn't exist, but I am not sure what is the right way to create the file in the kocal-vue-web-extension, or if it is needed for that matter.

Try This
vue create --preset kocal/vue-web-extension my-extension

Related

GSAP fails to import

I am trying to include gsap into a JavaScript file and even it being very straight forward it will not load. I am using what GreenSock docs say to do and still no luck. I have added "type": "module" in the json file and the script file I am import into. In my HTML has type="module included and I have a class module already imported into it. It is working fine.
After doing a npm install gsap and it is in my .json file "gsap": "^3.11.0"
They say include this at the very top of the file using it: import {gsap} from "gsap"
Doing so only throws a console error:
Uncaught TypeError: Failed to resolve module specifier "gsap". Relative references must start with either "/", "./", or "../".
I didn't include any of those being it is a npm install not a cdn script, then on a whim I did try to include any one of those and still nothing. But the error now reads:
GET ###url####ERR_ABORTED 404 (Not Found) looking for a file in my directory. With npm install there is no file just a node_module.
Will just go to the cdn version but just wondering why this is a problem? I am using a tutorial and even the npm isntall steps he uses worked. But when I try it fails .... included image and with or with a " ./ " director included nothing loads
If anyone has any advice feel free to include it here. Removed via npm remove gsap and included the cdn in my html. It is 2022 and shouldn't have to be this hard .....
I just needed to put the cdn in the html and gsap worked perfectly in the js file
CDN - <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

How to remove vuetify installed using vue cli?

I installed vuetify using the command vue add vuetify, but an error as below occurred because I didn't create the project using vue create <project>, instead, I used vue init <template> <project>.
Then, my project cannot run anymore. When I issued npm start, tons of errors occurred. The screenshot below is one of them:
Could someone teach me how to recover from these errors? Can I remove this plugin?
Or did it just destroy my project and I have to create a new one and start from scratch again?
Thanks
You can try
npm uninstall vue-cli-plugin-vuetify
removes veutify as a dependency
Cross verify in `package.json' file

Im getting a error about in a manifest json i cant locate when serving my vue project

So this is the error i get when i open my vue project... except that i cant even locate my manifest.json nore do i have a /img/icons folder in the project. I cannot figure out what the error is or how to correct it
Error while trying to use the following icon from the Manifest: http://localhost:8080/img/icons/android->chrome-192x192.png (Download error or resource isn't a valid image)
The error you're seeing is typically caused by altering a project created using Vue Cli 3's command vue create some-project and then removing either parts of or in its entirety the public folder. Namely, the error complains about the absence of icon files situated in public/img/icons, aimed at providing android, apple or web icons/favicons for the served/built app.
A possible fix for this error is to create a new project (run vue create whatever outside of your project) and copy-paste the resulting public/ folder into your current project.
If you haven't created your project with Vue Cli 3, the solution above will likely not work.
For Vue Cli 2.x projects, according to Vue Cli docs running vue init webpack my-project in the root of the project (where my-project is the name of your project as set in package.json) might work.

which angular2 js file should be added in on the client side?

I am a semi noob in web development.
I just started playing around with angular2 today. And i ran into a problem..
If I were to install angular2 with npm to my local computer, which file is the js file that should be linked to the html page that show up on the client?
In their guide, i see a file called /node_modules/angular2/bundles/angular2.sfx.dev.js. But i don't even see this file at all.
Is there some script that i should run to build that file? Or is the file renamed? I am really confused.
I tried some file /angular2/bundles/angular2.js, but it doesn't even export ng variable to window!
I see that in https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js, eventually ng gets exported. But what changed in alpha 53? (the version i get for doing npm install angular2)
In my projects, I a using
"node_modules/angular2/bundles/angular2.dev.js"
You might additionally need to install/add systemjs, just in case you are using the systemjs library.

How to use Aurelia bundle for a MVC app

I am trying to use Aurelia bundle --force command with an Aurelia app hosted within a page of my MVC application.
When i try to run the command, I keep getting the following error:
info: Creating bundle ...
fs.js:549
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
Error: ENOENT: no such file or directory, open 'C:\Users\...\WebFrontend\index.html'
How do you change the location where aurelia bundle looks up for the index.html? My index.html is not in the root of the website. Furthermore, my aurelia 'index.html' is actually named settings.cshtml
UPDATE:
I finally got it working by putting my entire Aurelia app within a sub folder of my MVC app. Using post build events in my project, I got Aurelia-CLI to bundle my app. Within my setting.cshtml, I basically just reference the config.js and system.js.
This works great, but I need to rebuild the app each time I make a change which is not ideal. Still need to figure this one out.
Steve Sanderson made a template for Aurelia (that is no longer supported by Microsoft). https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/
You can also use the Aureali cli to create one.
This should work better now then in 2015.