Basic familiarity with Vue. Node.js and npm installed.
Prior experience with Electron is a plus, but not required.
This implies that if you have prior familiarity working with these technologies, you can use the same codebase to develop a desktop application for Windows, Linux, and macOS.
Behind the scenes, Electron combines the Chromium engine with Node.js runtime to read and run your codebase as a standalone desktop program.
And, to prove its capabilities, popular desktop programs created using Electron include Slack, VS Code, and WhatsApp Desktop.
Big community — The Electron community is quite a big and active one, a major factor adding to this is because the framework is being used and supported by top companies.
Just like anything else, there are some downsides to building desktop applications with Electron too. Some of them include:.
If you’ve worked with Vue before, it’s fairly simple to get started with Electron.
This is possible with a Vue CLI plugin called Electron Builder, and in the coming sections, we’ll learn how this plugin works by building a sample application that returns a wholesome list of trending movies from themoviedb API.
To do this run:. Running the above command will install the most recent stable version of Vue CLI, and you can verify that it was successful by running vue -V, which should print out the installed version of Vue.
Next, we want to create a new Vue application, so go ahead and run the command below to create a new app named vue-desktop:.
- The final step is to add the Vue Electron Builder plugin, and we can do this by running the command below:.
- This will ask you for the version of Electron you want to add to this Vue project, and once you’ve done so, you should see a success message indicating that Electron Builder was installed.
You can then launch the app by running:. And you should see an output similar to the screenshot below:.
Closing the dev tool, you should see the complete preview of the application, like in the image below:.
And if you’ve worked with Vue CLI in the past, you will notice that the file structure is pretty much the same. The only change is the addition of a new background.js file, and this file is responsible for running our Vue application as a stand-alone desktop application.
The first step is to open up public/index.html and add an entry for Bootstrap and Font Awesome in the head section, like in the code below:.
Next, in the src/components folder, create a new file called MovieCard.vue and paste the following code into it:.
The next step is to delete all of the code contained in src/App.vue and update with the following:.
- At this point, if we run our application, we should have the following output:.
- The final step is to define a method that fetches the most popular movies from the TMDB API.
- This process would require you to create a free account with them to retrieve your API key.
- To do this, update src/App.vue with the following code:.
And a small change to our markup is looping all of the results returned from TMDB into our MovieCard component.
If we refresh our application at this stage, everything should work fine, and you should have an output similar to the image below:.
Compiling our application as a stand-alone executable file is straightforward. We can do so by running the command below:.
Keep in mind the executable app that is generated is dependent on the operating system you’re working with.
However, Electron Builder allows you to define which platform (or platforms) you want to generate executables for.
Available options include Mac, Win, and Linux.
And the code for the complete application can be found here on GitHub. If you enjoy reading the article, do leave a comment below! vue-router is an excellent routing solution for Vue.js, but requires additional configuration to update the page title and metadata on route change.
There will be times where you will want the title of the browser to change when the page changes.
And for SEO (search engine optimization), you will not want every search result or link to your website to say “Home Page” for all routes.
You will build an example Vue application with customizable page title and metadata on route change.
To complete this tutorial, you will need:. Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.
This tutorial was verified with Node v14.6.0, npm v6.14.7, Vue.js v2.6.11, vue-router v3.2.0, and @vue/cli v4.4.6. Let’s create a fresh Vue project. First, open your terminal and use vue-cli create a Vue project:.
This long command is a set of presets based on defaults established by @vue/cli/packages/@vue/cli/lib/options.js.
When reformatted for readability, it looks look like this:.
These presets add vue-router as a plugin (cli-plugin-router), enable history mode, add Babel, and add ESLint.
For the needs of this tutorial, you will not require TypesScript, Progressive Web App (PWA) support, Vuex, CSS pre-processors, unit testing, or end-to-end (E2E) testing.
At this point, we have a fresh Vue Project to build upon. The next step will be defining sample routes in the application.
In our example, our goal will be to construct an application consisting of:.
- a home route (/). an adjacent About route (/about).
- and a nested Frequently Asked Questions route (/about/frequently-asked-questions).
Take a moment to familiarize yourself with how VueRouter has been added by cli-plugin-router:. Now, open router/index.js:. Take a moment to familiarize yourself with the routes for "Home" and "About" generated by cli-plugin-router. And add the route for the nested "Frequently Asked Questions":.
Create a new file called FrequentlyAskedQuestions.vue in the views directory:. Then, add the template:.
Now, open About.vue:. Next, add
At this point, we have a Vue application with routes to "Home", "About", and "Frequently Asked Questions".
We can run the following command:.
Clicking on the navigation links should display the expected components. However, the
vue-router supports Route Meta Fields for title and meta values. Let’s revisit our routes and add meta fields. Open router/index.js:.
And add meta fields for "Home", "About", and "Frequently Asked Questions":. However, this will not result in updating the page title and metadata on route change.
To accomplish that, we will need a custom navigation guard.
In the route/index.js file, add a global navigation guard after the routes but before we export router:. At this point, we have a Vue application with routes, meta fields, and navigation guard. We can run the following command:. And visit localhost:8080 in a web browser.
Now, when your routes change, the page
If you use prerendering, then these changes will be baked into your prerendered HTML files and will work great for SEO.
For SSR (server-side rendering), it can be a bit more complicated. It’s also worth noting that dynamic, frequently-updating titles are out of the question with this method.
You’ll probably have to stick with manually updating document.title for such use cases.
If you’d like to learn more about Vue.js, check out our Vue.js topic page for exercises and programming projects.
单独安装tui-editor的时候我也遇到了一样的Permission Denied问题，详细报错如下：npm ERR!
code 128npm ERR! An unknown git error occurrednpm ERR!
Please make sure you have the correct access rightsnpm ERR!
and the repository exists.
解决方案：参考【https://www.thinbug.com/q/46305961】的答案1，找到start-ssh-agent.cmd，双击运行后，再执行npm i tui-editor就能正常安装了。（成功安装的时候DevSidecar的npm加速我也是开启了的，单应该没有关系，因为单独开启加速也没有安装成功）.
问题原因：npm install尝试使用的ssh-agent来自git，但与提供的ssh-agent的窗口冲突。可以使用start-ssh-agent启动Git ssh-agent，但是当您尝试使用命令ssh-add -k ~/.ssh/id_rsa将ssh-key添加到ssh-agent时，它试图从Windows访问ssh-add.exe。路径，但不从git中选择ssh-add.exe。.
Here's an easy way to downgrade Vetur to a working version:. Set "extensions.autoUpdate": false. Find the version you want and download VSIX https://github.com/vuejs/vetur/blob/master/CHANGELOG.md(opens new window). Install VSIX following this guide: https://code.visualstudio.com/docs/editor/extension-gallery#_install-from-a-vsix(opens new window).
The two possible causes are:. Other extensions also contribute a Vue language, and that conflicts with Vetur.
For 1, try disabling all other Vue related extensions.
For 2, try these methods:. Run command: Developer: Reinstall Extension for Vetur.
(Windows): Try removing & reinstall Vetur with admin privilege. If nothing above works, download the latest pre-packaged vsix file(opens new window) and install through vsix(opens new window).