how to use existing vue project found github - vue.js

I found this example vue project in github.
How do i deploy it in my localhost ?
https://github.com/vuejs-example-apps/tic-tac-toe

No installation required. Vue is used as a CDN in that project and all you need are
corssCircle.html
crossCircle.js and
crossCircle.css
If you are going to deploy it on your localhost, simply rename the corssCircle.html into index.html for xampp, etc. or you can just open the file in browser and it will start running.

If you open crossCircle.html you'll see that Vue is included via this line:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
If you would like to install Vue locally you can check this guide for options.

Related

Vue nuxt js updated code refreshes when npm run dev

I am new to nuxt js. I have a template of nuxt js which I am working on. In router.js I added some new routes, that's working fine, but when I run my development server again npm run dev, the updated code is just removed. I see the old code there. And it only does for the .nuxt folder. Not for the vue components.
Can anyone suggest something? Thanks.
Nuxt uses a method called File system routing, with that routes.js file is automatically generated according to your configuration and pages created, that is why your changes get removed
If you have a specific requirement that need more customization you can extend the router config

created vue app with pwa, but cannot find manifest.json to edit

update: solved by reading document :
https://cli.vuejs.org/core-plugins/pwa.html#configuration
I just created a vue app, then
vue add #vue/pwa
The manifest.json is found by browser, but I can not find the file to edit. Please help!!!!
the brower shows manifest.json
app file structure
I solved this problem by manually adding a manifest.json file to the public folder. It didn't work at first until I stopped the server and RESTARTED THE SERVER by running npm run serve.

Vuepress inside and integrated with Vue project

I´m starting with Vuepress (https://vuepress.vuejs.org), and i´d followed the docs to integrate it with an existing project (https://vuepress.vuejs.org/guide/getting-started.html#inside-an-existing-project). I used the sugested docs directory.
But now i need to "really" integrate with my project and i need to when my users access the my-project.com/docs, to reach the Vuepress docs
If i make (yarn docs:build), the /dist folder will be generated to be used anywhere as a statics HTML files. I tought in put the /dist/ content in the /static/ files of my project. But the vue-router response to /docs is a 404.
And i will still need to make 2 builds, my project and the docs.
The questions are:
How can i make the vue-router "see" the vuepress build files? Where to put them?
How can i integrate the run build of project to make them both?
I have 2 projects, one with quasar and the other i´m using vue-cli 3.
Thank you all.
How can i make the vue-router "see" the vuepress build files? Where to put them?
You don't, it's basically an external link. A simple <a href="/docs"> should be sufficient.
How can i integrate the run build of project to make them both?
You don't, you add a new task that does them both.
// package.json
{
"scripts": {
"build-project": "node build-project.js"
}
}
from a terminal
# yarn run build-project
I think maybe the point problem is to solve the Vue-Router to make the vue-router don't handle the link when we external link the /docs as like.

Vue CLI build and run index.html file without server

I'm using the latest vue-cli version 3.0.
My current issue is that whenever I run npm run build the files generated in the dist folder can't be run without a server.
I would like to be able to just open the index.html file on the browser. How do I go about doing this?
I ran into a similar issue and the following two changes helped me to make it work. Now I can just open index.html in Chrome as a file to run my SPA from file system.
In vue.config.js, I did not have a publicPath configured, which resulted in the default "/".
I had to configure it to empty string like this so that it uses relative paths:
module.exports = {
publicPath: '',
}
PS: Since Vue CLI 3.3 use publicPath instead of the now deprecated baseURL
I was using the history mode of vue-router, which does not work
on a local file system to route the paths back to index.html. So I
omitted the mode to go back to the default hash mode.
I was able to fix this issue by manually changing the url of the referenced files.
It's a bit of a pain, but this was a solution without having to mess around with the build configuration.
What you need to do:
Open index.html
Find href=/ and replace with href=
Find src=/ and replace with src=
NOTE: I was in need of this solution because I was creating a Phonegap app.
You can use the http-server module
npm install http-server -g
http-server dist/
normally the server starts at port 8080 so you can serve the build app on http://localhost:8080

aurelia browser loading main.ts not main.js

i am new to aurelia, and when including it into my project as the api frontend i ran into an issue i need clarification about.
i followed the basic starting guide and made sure the code could load. which it does if i name the main.js as main.ts (and app.js also).
due to the fact, that i did not find any explanation or configuation option in the code nor "the internet" i wonder what i did do wrong
does someone else did have that problem.
it tries to load typescript even though the documentation says app.js there
Minimal Project
download http://aurelia.io/downloads/basic-aurelia-project.zip
copy the code in http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/quick-start as js
run any webserver with it. (e.g. python -m SimpleHTTPServer 8000)
The startup package is configured by default to work with TypeScript so to change this you need to replace the script
<script src="scripts/config-typescript.js"></script>
in index.html with
<script src="scripts/config-esnext.js"></script>
to use Javascript / ES next
This is mentioned in the documentation but may be easily missed, and the rest of the startup documentation follows the javascript approach.
Note that this tutorial is a quick startup - a more comprehensive one is http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial and some more alternative seeds (e.g. JSPM / webpack) can be found in this repo: https://github.com/aurelia/skeleton-navigation