vite_rails 1.0.2 โ†’ 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a21a899a4c8bb0f107bdb5947e73654aa4ff4f5c8096655fca6afbf3230bca07
4
- data.tar.gz: c58dac4d02a4d63b65e0b520b5b124b2b6e4e0d02324fe1a99f6d76b24639778
3
+ metadata.gz: 7f4c178774d28f47732953d6d672db2b2551030534b7a607f157e4692e992160
4
+ data.tar.gz: 9cb4eeab752ca23b2857487b1217d7e3f5b73afa72663ea8e01372328129368f
5
5
  SHA512:
6
- metadata.gz: 3c15259b8704298bdf8ac0a63d93960c75d1f977de62645e9e855d644cb29d1de270e0e1a1357edfe468c816264c9136af3cab1226b13eb3ef2e9aea83f89b8e
7
- data.tar.gz: 1ba34b6164b4d0321f402fb3a96df166fa36f98539f3403aa1add892bdc1c056e836456970758349dc8db0189f13e96413bbbf1dd7f88fa6d116b232efe18710
6
+ metadata.gz: 99ce8a2425f5eeaac8715f6204ec19b80d7b215dfe427cd765f25023c0fb82e72b086cf883e0e36931b4ae8f70457910fd57d21a59258befe139456e89bb130e
7
+ data.tar.gz: e693145af6596c602eac3136ada51393bf2dd9e06d5d8372739dbef84d811cc8bc3e689411ba308f8535bbeafa0356e8f26452342d2bba9a05132fd839588623
@@ -1,3 +1,19 @@
1
- ## Vite Rails 1.0.0
1
+ ## Vite Rails 1.0.7 (2020-01-20)
2
+
3
+ - Add `vite_client_tag` to ensure the Vite client can be loaded in apps that don't use any imports.
4
+
5
+ ## Vite Rails 1.0.6 (2020-01-20)
6
+
7
+ - Ensure running `bin/rake assets:precompile` automatically invokes `vite:build`.
8
+
9
+ ## Vite Rails 1.0.5 (2020-01-20)
10
+
11
+ - Automatically add `<link rel="modulepreload">` and `<link rel="stylesheet">` when using `vite_javascript_tag`, which simplifies usage.
12
+
13
+ ## Vite Rails 1.0.4 (2020-01-19)
14
+
15
+ - Remove Vue specific examples from installation templates, to ensure they always run.
16
+
17
+ ## Vite Rails 1.0.0 (2020-01-18)
2
18
 
3
19
  Initial Version
data/README.md CHANGED
@@ -19,24 +19,30 @@
19
19
  </p>
20
20
  </h1>
21
21
 
22
+ [website]: https://vite-rails.netlify.app/
23
+ [features]: https://vite-rails.netlify.app/guide/introduction.html
24
+ [guides]: https://vite-rails.netlify.app/guide/
25
+ [config]: https://vite-rails.netlify.app/config/
22
26
  [vite_rails]: https://github.com/ElMassimo/vite_rails
23
27
  [webpacker]: https://github.com/rails/webpacker
24
28
  [vite]: http://vitejs.dev/
29
+ [config file]: https://github.com/ElMassimo/vite_rails/blob/main/package/default.vite.json
25
30
 
26
- [__Vite Rails__][vite_rails] allows you to use [Vite] to power the frontend.
31
+ [__Vite Rails__][vite_rails] allows you to use [Vite] to power the frontend of your Rails app.
27
32
 
28
33
  [Vite] is to frontend tooling as Ruby to programming, pure joy! ๐Ÿ˜
29
34
 
30
35
  ## Features โšก๏ธ
31
36
 
32
- - ๐Ÿค– Automatic Entrypoint Detection
33
- - โšก๏ธ Hot Reload
34
- - โš™๏ธ Rake Tasks
35
- - ๐Ÿช Hooks to <kbd>assets:precompile</kbd> and friends
37
+ - ๐Ÿค– Automatic entrypoint detection
38
+ - โšก๏ธ Blazing fast hot reload
39
+ - ๐Ÿš€ Zero-config deployments
40
+ - ๐Ÿค Integrated with <kbd>assets:precompile</kbd>
41
+ - [And more!][features]
36
42
 
37
43
  ## Documentation ๐Ÿ“–
38
44
 
39
- Coming Soon!
45
+ Visit the [documentation website][website] to check out the [guides] and searchable [configuration reference].
40
46
 
41
47
  ## Installation ๐Ÿ’ฟ
42
48
 
@@ -55,6 +61,23 @@ bin/rake vite:install
55
61
 
56
62
  This will generate configuration files and a sample setup.
57
63
 
64
+ Additional installation instructions are available in the [documentation website][website].
65
+
66
+ ## Getting Started ๐Ÿ’ป
67
+
68
+ Restart your Rails server, and then run `bin/vite` to start the Vite development server.
69
+
70
+ Add the following your `views/layouts/application.html.erb`:
71
+
72
+ ```erb
73
+ <%= vite_client_tag %>
74
+ <%= vite_javascript_tag 'application' %>
75
+ ```
76
+
77
+ Visit any page and you should see a printed console output: `Vite โšก๏ธ Rails`.
78
+
79
+ For more [guides] and a full [configuration reference], check the [documentation website][website].
80
+
58
81
  ## Inspiration ๐Ÿ’ก
59
82
 
60
83
  - [webpacker]
@@ -1,10 +1,8 @@
1
1
  import { defineConfig } from 'vite'
2
- import VuePlugin from '@vitejs/plugin-vue'
3
2
  import RubyPlugin from 'vite-plugin-ruby'
4
3
 
5
4
  export default defineConfig({
6
5
  plugins: [
7
- VuePlugin(),
8
6
  RubyPlugin(),
9
7
  ],
10
8
  optimizeDeps: {
@@ -1,16 +1,18 @@
1
- import '@rails/ujs'
2
- import Turbolinks from 'turbolinks'
3
- import ActiveStorage from '@rails/activestorage'
4
- import { createApp } from 'vue'
1
+ // Example: Load Rails libraries in Vite.
2
+ //
3
+ // import '@rails/ujs'
4
+ //
5
+ // import Turbolinks from 'turbolinks'
6
+ // import ActiveStorage from '@rails/activestorage'
7
+ //
8
+ // // Import all channels.
9
+ // import.meta.globEager('./**/*_channel.js')
10
+ //
11
+ // Turbolinks.start()
12
+ // ActiveStorage.start()
5
13
 
6
- import App from '~/App.vue'
7
- import '~/channels'
8
- import '../../stylesheets/index.css'
9
-
10
- Turbolinks.start()
11
- ActiveStorage.start()
14
+ // Example: Import a stylesheet in app/javascript/index.css
15
+ // import '~/index.css'
12
16
 
13
17
  console.log('Vite โšก๏ธ Rails')
14
18
 
15
- createApp(App).mount('#app')
16
-
@@ -1,14 +1,12 @@
1
1
  # frozen_string_literal: true
2
2
 
3
- # Install ViteRails
3
+ # Install Vite Rails
4
+ say 'Creating configuration files'
4
5
  copy_file "#{ __dir__ }/config/vite.json", ViteRails.config.config_path
6
+ copy_file "#{ __dir__ }/config/vite.config.ts", Rails.root.join('vite.config.ts')
5
7
 
6
- if Dir.exist?(ViteRails.config.source_code_dir)
7
- say 'The JavaScript app source directory already exists. Move it and try again to see a basic setup.'
8
- else
9
- say 'Creating JavaScript app source directory'
10
- directory "#{ __dir__ }/javascript", ViteRails.config.source_code_dir
11
- end
8
+ say 'Creating entrypoints directory'
9
+ directory "#{ __dir__ }/javascript/entrypoints", ViteRails.config.source_code_dir.join(ViteRails.config.entrypoints_dir)
12
10
 
13
11
  apply "#{ __dir__ }/binstubs.rb"
14
12
 
@@ -28,14 +26,6 @@ if git_ignore_path.exist?
28
26
  }
29
27
  end
30
28
 
31
- install = if Rails.root.join('yarn.lock').exist?
32
- 'yarn add'
33
- elsif Rails.root.join('pnpm-lock.yaml').exist?
34
- 'pnpm install'
35
- else
36
- 'npm install'
37
- end
38
-
39
29
  Dir.chdir(Rails.root) do
40
30
  say 'Installing JavaScript dependencies for Vite Rails'
41
31
  package_json = File.read("#{ __dir__ }/../../package.json")
@@ -44,19 +34,7 @@ Dir.chdir(Rails.root) do
44
34
  plugin_version = package_json.match(/"vite-plugin-ruby": "(.*)"/)[1]
45
35
 
46
36
  say 'Installing vite as direct dependencies'
47
- run "#{ install } vite@#{ vite_version } vite-plugin-ruby@#{ plugin_version }"
48
- end
49
-
50
- if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
51
- src = begin
52
- "#{ ViteRails.config.protocol }://#{ ViteRails.config.host_with_port }"
53
- rescue StandardError
54
- 'http://localhost:3036'
55
- end
56
- say 'You need to allow vite-dev-server host as allowed origin for connect-src.', :yellow
57
- say 'This can be done in Rails 5.2+ for development environment in the CSP initializer', :yellow
58
- say 'config/initializers/content_security_policy.rb with a snippet like this:', :yellow
59
- say %(policy.connect_src :self, :https, "http://#{ src }", "ws://#{ src }" if Rails.env.development?), :yellow
37
+ run "yarn add vite@#{ vite_version } vite-plugin-ruby@#{ plugin_version }"
60
38
  end
61
39
 
62
- say 'ViteRails successfully installed ๐ŸŽ‰ ๐Ÿฐ', :green
40
+ say 'Vite โšก๏ธ Rails successfully installed! ๐ŸŽ‰', :green
@@ -3,7 +3,7 @@
3
3
  $stdout.sync = true
4
4
 
5
5
  def enhance_assets_precompile
6
- Rake::Task['assets:precompile'] do |task|
6
+ Rake::Task['assets:precompile'].enhance do |task|
7
7
  prefix = task.name.split(/#|assets:precompile/).first
8
8
 
9
9
  Rake::Task["#{ prefix }vite:build"].invoke
@@ -14,7 +14,6 @@ namespace :vite do
14
14
  $stdout.puts "vite-plugin-ruby: \n#{ `npm list vite-plugin-ruby version` }"
15
15
 
16
16
  $stdout.puts "Is bin/vite present?: #{ File.exist? 'bin/vite' }"
17
- $stdout.puts "Is bin/vite-dev-server present?: #{ File.exist? 'bin/vite-dev-server' }"
18
17
  $stdout.puts "Is bin/yarn present?: #{ File.exist? 'bin/yarn' }"
19
18
  end
20
19
  end
@@ -22,7 +22,7 @@ class ViteRails
22
22
  cattr_accessor(:logger) { ActiveSupport::TaggedLogging.new(ActiveSupport::Logger.new(STDOUT)) }
23
23
 
24
24
  class << self
25
- delegate :config, :builder, :manifest, :commands, :dev_server, to: :instance
25
+ delegate :config, :builder, :manifest, :commands, :dev_server, :dev_server_running?, to: :instance
26
26
  delegate :mode, to: :config
27
27
  delegate :bootstrap, :clean, :clobber, :build, to: :commands
28
28
 
@@ -62,6 +62,11 @@ class ViteRails
62
62
  end
63
63
  end
64
64
 
65
+ # Public: Returns true if the Vite development server is running.
66
+ def dev_server_running?
67
+ ViteRails.run_proxy? && dev_server.running?
68
+ end
69
+
65
70
  # Public: Current instance configuration for Vite.
66
71
  def config
67
72
  @config ||= ViteRails::Config.resolve_config
@@ -66,8 +66,6 @@ private
66
66
  # Internal: Used to load a JSON file from the specified path.
67
67
  def load_json(path)
68
68
  JSON.parse(File.read(File.expand_path(path))).deep_transform_keys(&:underscore)
69
- rescue => error
70
- (require 'pry-byebug';binding.pry;);
71
69
  end
72
70
 
73
71
  # Internal: Retrieves a configuration option from environment variables.
@@ -14,7 +14,7 @@ class ViteRails::DevServerProxy < Rack::Proxy
14
14
 
15
15
  # Rack: Intercept asset requests and send them to the Vite server.
16
16
  def perform_request(env)
17
- if vite_should_handle?(env['REQUEST_URI']) && dev_server.running?
17
+ if vite_should_handle?(env['REQUEST_URI'], env['HTTP_REFERER']) && dev_server.running?
18
18
  env['REQUEST_URI'] = env['REQUEST_URI']
19
19
  .sub(vite_asset_url_prefix, '/')
20
20
  .sub('.ts.js', '.ts') # Patch: Rails helpers always append the extension.
@@ -36,9 +36,11 @@ private
36
36
 
37
37
  delegate :config, :dev_server, to: :@vite_rails
38
38
 
39
- def vite_should_handle?(url)
40
- url.start_with?(vite_asset_url_prefix) || url.start_with?(VITE_DEPENDENCY_PREFIX) ||
41
- url.include?('?t=') # Direct Hot Reload
39
+ def vite_should_handle?(url, referer)
40
+ return true if url.start_with?(vite_asset_url_prefix) # Vite Asset
41
+ return true if url.start_with?(VITE_DEPENDENCY_PREFIX) # Vite Package Asset
42
+ return true if url.include?('?t=') # Hot Reload
43
+ return true if referer && URI.parse(referer).path.start_with?(vite_asset_url_prefix) # Entry Imported from another Entry.
42
44
  end
43
45
 
44
46
  def vite_asset_url_prefix
@@ -2,40 +2,66 @@
2
2
 
3
3
  # Public: Allows to render HTML tags for scripts and styles processed by Vite.
4
4
  module ViteRails::Helper
5
+ DEFAULT_VITE_SKIP_PRELOAD_TAGS = Rails::VERSION::MAJOR <= 5 && Rails::VERSION::MINOR < 2
6
+
5
7
  # Public: Returns the current Vite Rails instance.
6
8
  def current_vite_instance
7
9
  ViteRails.instance
8
10
  end
9
11
 
12
+ # Public: Renders a script tag for vite/client to enable HMR in development.
13
+ def vite_client_tag
14
+ content_tag('script', '', src: '/@vite/client', type: 'module') if ViteRails.dev_server_running?
15
+ end
16
+
10
17
  # Public: Computes the relative path for the specified given Vite asset.
11
18
  #
12
19
  # Example:
13
20
  # <%= vite_asset_path 'calendar.css' %> # => "/vite/assets/calendar-1016838bab065ae1e122.css"
14
21
  def vite_asset_path(name, **options)
15
- current_vite_instance.manifest.lookup!(name, **options)
22
+ current_vite_instance.manifest.lookup!(name, **options).fetch('file')
16
23
  end
17
24
 
18
25
  # Public: Renders a <script> tag for the specified Vite entrypoints.
19
- def vite_javascript_tag(*names, type: 'module', **options)
20
- javascript_include_tag(*sources_from_vite_manifest_entrypoints(names, type: :javascript), type: type, **options)
26
+ def vite_javascript_tag(*names,
27
+ type: 'module',
28
+ asset_type: :javascript,
29
+ skip_preload_tags: DEFAULT_VITE_SKIP_PRELOAD_TAGS,
30
+ skip_style_tags: false,
31
+ crossorigin: 'anonymous',
32
+ **options)
33
+ js_entries = names.map { |name| current_vite_instance.manifest.lookup!(name, type: asset_type) }
34
+ js_tags = javascript_include_tag(*js_entries.map { |entry| entry['file'] }, type: type, crossorigin: crossorigin, **options)
35
+
36
+ unless skip_preload_tags || ViteRails.dev_server_running?
37
+ preload_paths = js_entries.flat_map { |entry| entry['imports'] }.compact.uniq
38
+ preload_tags = preload_paths.map { |path| preload_link_tag(path, crossorigin: crossorigin) }
39
+ end
40
+
41
+ unless skip_style_tags || ViteRails.dev_server_running?
42
+ style_paths = names.map { |name| current_vite_instance.manifest.lookup(name, type: :stylesheet)&.fetch('file') }.compact
43
+ style_tags = stylesheet_link_tag(*style_paths)
44
+ end
45
+
46
+ safe_join [js_tags, preload_tags, style_tags]
21
47
  end
22
48
 
23
49
  # Public: Renders a <script> tag for the specified Vite entrypoints.
24
50
  #
25
51
  # NOTE: Because TypeScript is not a valid target in browsers, we only specify
26
52
  # the ts file when running the Vite development server.
27
- def vite_typescript_tag(*names, type: 'module', **options)
28
- javascript_include_tag(*sources_from_vite_manifest_entrypoints(names, type: :typescript), type: type, **options)
53
+ def vite_typescript_tag(*names, **options)
54
+ vite_javascript_tag(*names, asset_type: :typescript, **options)
29
55
  end
30
56
 
31
57
  # Public: Renders a <link> tag for the specified Vite entrypoints.
32
58
  def vite_stylesheet_tag(*names, **options)
33
- stylesheet_link_tag(*sources_from_vite_manifest_entrypoints(names, type: :stylesheet), **options)
59
+ stylesheet_link_tag(*sources_from_vite_manifest(names, type: :stylesheet), **options)
34
60
  end
35
61
 
36
62
  private
37
63
 
38
- def sources_from_vite_manifest_entrypoints(names, type:)
39
- names.flat_map { |name| vite_asset_path(name, type: type) }.uniq
64
+ def sources_from_vite_manifest(names, type:)
65
+ names.map { |name| vite_asset_path(name, type: type) }
40
66
  end
41
67
  end
@@ -5,7 +5,7 @@
5
5
  #
6
6
  # Example:
7
7
  # lookup_entrypoint('calendar', type: :javascript)
8
- # => "/vite/assets/calendar-1016838bab065ae1e314.js"
8
+ # => { "file" => "/vite/assets/calendar-1016838bab065ae1e314.js", "imports" => [] }
9
9
  #
10
10
  # NOTE: Using "autoBuild": true` in `config/vite.json` file will trigger a build
11
11
  # on demand as needed, before performing any lookup.
@@ -29,7 +29,8 @@ class ViteRails::Manifest
29
29
  # Returns a relative path, or nil if the asset is not found.
30
30
  #
31
31
  # Example:
32
- # ViteRails.manifest.lookup('calendar.js') # => "/vite/assets/calendar-1016838bab065ae1e122.js"
32
+ # ViteRails.manifest.lookup('calendar.js')
33
+ # # { "file" => "/vite/assets/calendar-1016838bab065ae1e122.js", "imports" => [] }
33
34
  def lookup(name, type:)
34
35
  build if should_build?
35
36
 
@@ -43,12 +44,7 @@ class ViteRails::Manifest
43
44
 
44
45
  private
45
46
 
46
- delegate :config, :builder, :dev_server, to: :@vite_rails
47
-
48
- # Public: Returns true if the Vite development server is running.
49
- def dev_server_running?
50
- ViteRails.run_proxy? && dev_server.running?
51
- end
47
+ delegate :config, :builder, :dev_server_running?, to: :@vite_rails
52
48
 
53
49
  # NOTE: Auto compilation is convenient when running tests, when the developer
54
50
  # won't focus on the frontend, or when running the Vite server is not desired.
@@ -59,9 +55,9 @@ private
59
55
  # Internal: Finds the specified entry in the manifest.
60
56
  def find_manifest_entry(name)
61
57
  if dev_server_running?
62
- "/#{ config.public_output_dir.join(name.to_s) }"
63
- elsif file = manifest.dig(name.to_s, 'file')
64
- "/#{ config.public_output_dir.join(file) }"
58
+ { 'file' => "/#{ config.public_output_dir.join(name.to_s) }" }
59
+ else
60
+ manifest[name.to_s]
65
61
  end
66
62
  end
67
63
 
@@ -83,7 +79,10 @@ private
83
79
  # Internal: Returns a Hash with the entries in the manifest.json.
84
80
  def load_manifest
85
81
  if config.manifest_path.exist?
86
- JSON.parse(config.manifest_path.read)
82
+ JSON.parse(config.manifest_path.read).each do |_, entry|
83
+ entry['file'] = within_public_output_dir(entry['file'])
84
+ entry['imports'] = entry['imports']&.map { |path| within_public_output_dir(path) }
85
+ end
87
86
  else
88
87
  {}
89
88
  end
@@ -96,6 +95,11 @@ private
96
95
  "#{ name }.#{ extension_for_type(entry_type) }"
97
96
  end
98
97
 
98
+ # Internal: Scopes the paths in the manifest to the output folder in public.
99
+ def within_public_output_dir(path)
100
+ "/#{ config.public_output_dir.join(path) }"
101
+ end
102
+
99
103
  # Internal: Allows to receive :javascript and :stylesheet as :type in helpers.
100
104
  def extension_for_type(entry_type)
101
105
  case entry_type
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  class ViteRails
4
- VERSION = '1.0.2'
4
+ VERSION = '1.0.7'
5
5
  end
@@ -2,27 +2,11 @@
2
2
  "name": "only-for-workflows",
3
3
  "version": "unknown",
4
4
  "scripts": {
5
- "test": "jest",
6
- "lint": "eslint package/"
5
+ "lint": "npm -C package run lint",
6
+ "test": "npm -C package run test"
7
7
  },
8
8
  "dependencies": {
9
- "vite": "^2.0.0-beta.30",
10
- "vite-plugin-ruby": "1.0.0"
11
- },
12
- "devDependencies": {
13
- "@vitejs/plugin-vue": "^1.0.6",
14
- "eslint": "^7.16.0",
15
- "eslint-config-airbnb": "^18.2.0",
16
- "eslint-config-prettier": "^7.1.0",
17
- "eslint-plugin-import": "^2.22.1",
18
- "eslint-plugin-jsx-a11y": "^6.3.1",
19
- "eslint-plugin-react": "^7.21.4",
20
- "jest": "^26.5.3"
21
- },
22
- "jest": {
23
- "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",
24
- "roots": [
25
- "<rootDir>/package"
26
- ]
9
+ "vite": "^2.0.0-beta.34",
10
+ "vite-plugin-ruby": "^1.0.1"
27
11
  }
28
12
  }
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: vite_rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.2
4
+ version: 1.0.7
5
5
  platform: ruby
6
6
  authors:
7
7
  - Mรกximo Mussini
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2021-01-19 00:00:00.000000000 Z
11
+ date: 2021-01-20 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: activesupport
@@ -123,13 +123,7 @@ files:
123
123
  - lib/install/binstubs.rb
124
124
  - lib/install/config/vite.config.ts
125
125
  - lib/install/config/vite.json
126
- - lib/install/javascript/App.vue
127
- - lib/install/javascript/assets/logo.png
128
- - lib/install/javascript/channels/consumer.js
129
- - lib/install/javascript/channels/index.js
130
- - lib/install/javascript/components/HelloWorld.vue
131
126
  - lib/install/javascript/entrypoints/application.js
132
- - lib/install/javascript/stylesheets/index.css
133
127
  - lib/install/template.rb
134
128
  - lib/tasks/vite/binstubs.rake
135
129
  - lib/tasks/vite/build.rake
@@ -192,8 +186,8 @@ homepage: https://github.com/ElMassimo/vite_rails
192
186
  licenses:
193
187
  - MIT
194
188
  metadata:
195
- source_code_uri: https://github.com/ElMassimo/vite_rails/tree/v1.0.2
196
- changelog_uri: https://github.com/ElMassimo/vite_rails/blob/v1.0.2/CHANGELOG.md
189
+ source_code_uri: https://github.com/ElMassimo/vite_rails/tree/v1.0.7
190
+ changelog_uri: https://github.com/ElMassimo/vite_rails/blob/v1.0.7/CHANGELOG.md
197
191
  post_install_message:
198
192
  rdoc_options: []
199
193
  require_paths:
@@ -1,27 +0,0 @@
1
- <script>
2
- import { defineComponent } from 'vue'
3
- import HelloWorld from '~/components/HelloWorld.vue'
4
-
5
- export default defineComponent({
6
- name: 'App',
7
- components: {
8
- HelloWorld
9
- }
10
- })
11
- </script>
12
-
13
- <style>
14
- #app {
15
- font-family: Avenir, Helvetica, Arial, sans-serif;
16
- -webkit-font-smoothing: antialiased;
17
- -moz-osx-font-smoothing: grayscale;
18
- text-align: center;
19
- color: #2c3e50;
20
- margin-top: 60px;
21
- }
22
- </style>
23
-
24
- <template>
25
- <img alt="Vue logo" src="../assets/logo.png" />
26
- <HelloWorld class="strange" msg="Hello Vue 3 + Vite" />
27
- </template>
@@ -1,4 +0,0 @@
1
- // Action Cable provides the framework to deal with WebSockets in Rails.
2
- // You can generate new channels where WebSocket features live using the `rails generate channel` command.
3
- import { createConsumer } from "@rails/actioncable"
4
- export default createConsumer()
@@ -1,3 +0,0 @@
1
- // Load all the channels within this directory and all subdirectories.
2
- // Channel files must be named *_channel.js.
3
- import.meta.globEager('./**/*_channel.js')
@@ -1,53 +0,0 @@
1
- <script>
2
- import { ref, defineComponent } from 'vue'
3
-
4
- export default defineComponent({
5
- name: 'HelloWorld',
6
- props: {
7
- msg: { type: String, required: true }
8
- },
9
- setup: () => {
10
- const count = ref(0)
11
- return { count }
12
- }
13
- })
14
- </script>
15
-
16
- <style scoped>
17
- a {
18
- color: #42b983;
19
- }
20
- </style>
21
-
22
- <template>
23
- <h1 v-bind="$attrs">{{ msg }}</h1>
24
- <p>
25
- <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Documentation</a> |
26
- <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
27
- </p>
28
-
29
- <p>
30
- Recommended setup:
31
- <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
32
- +
33
- <a
34
- href="https://marketplace.visualstudio.com/items?itemName=octref.vetur"
35
- target="_blank"
36
- >Vetur</a>
37
- +
38
- <a
39
- href="https://marketplace.visualstudio.com/items?itemName=znck.vue-language-features"
40
- target="_blank"
41
- >Vue DX</a>
42
- </p>
43
- <p>
44
- Make sure to use workspace version of TypeScript to get improved support via
45
- <a
46
- href="https://github.com/znck/vue-developer-experience"
47
- target="_blank"
48
- >@vuedx</a>.
49
- <br />Note @vuedx is still experimental and this setup is provided for early feedback.
50
- </p>
51
- <button name="Counter" @click="count++">count is: {{ count }}</button>
52
- <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
53
- </template>
@@ -1,3 +0,0 @@
1
- body {
2
- background: red;
3
- }